css美化select下拉列表(更换下拉箭头)的方法

时间:2021-10-31 18:05:55
http://www.jbxue.com/article/14362.html
本文介绍下,使用css美化select下拉列表样式的方法,更换下拉箭头的方法分享,有需要的朋友参考下。

本节内容:
css更换select下拉箭头

使用默认的select下拉列表,右边的下拉箭头很不美观。
原理分析:
在select外层加入2个span,首先设置第一个span,其width大于select的width,在这个span的背景加入想要的下拉箭头样式。
然后,再加第二个span,其width小于select的width,关键设置好它的overflow的宽度,隐藏select的下拉箭头。

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

1,css代码    
 

复制代码代码示例:.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;}

2,html内容部分    
 

复制代码代码示例:<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>

最终效果:
 

css美化select下拉列表(更换下拉箭头)的方法

在IE8,FF,Safari,Opera下显示正常。
实现方法:
第二步:添加第二个span,id是sleHid,这个span是将表单中的select隐藏起来,注意设置好宽度,这是关键。
第三步:为2个span写好样式,测试在不同浏览器里的兼容性。