巧用css美化select下拉列表 更换下拉箭头

所属栏目：常用CSS技巧　时间：2014-05-23　来源：网络　作者：不详　点击： 9912

使用默认的select下拉列表，右边的下拉箭头比较难看，我们可以用如下方法解决。

原 理是在select外层加入2个span，首先设置第一个span，其width大于select的width，在这个span的背景加入我们想要的下拉 箭头样式，然后再加第二个span，其width小于select的width，关键设置好它的overflow的宽度，隐藏select的下拉箭头。

优点是设置简单，缺点是若无javascript模拟鼠标点击则下拉箭头仅能起到装饰作用。

想要求漂亮而且代码的少的话，可以使用本方法。

使用到的图片：

CSS代码

1

2

3

.select { width:80px; height:24px; background:none; border:none; }    

#sleHid { display:block; width:56px; overflow:hidden; }    

#sleBG  { width:78px; height:24px; border:#61AC36 1px solid; border-right:none;  background:url("../images/common/selArr.jpg") #fff no-repeat 62px 1px;  display:block;}

XML/HTML代码

1

2

3

4

5

6

7

8

9

10

11

12

13

<div>    

<form>    

<span id="sleBG">   

<span id="sleHid">   

<select name="type" class="select">    

<option selected="selected">所有分类</option>    

<option value="1">图书</option>    

<option value="2">音像</option>    

</select>   

</span>   

</span>   

</form>   

</div>