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

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

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

id="QIHOO_UNION_1444458779608" src="http://api.so.lianmeng.360.cn/searchthrow/api/ads/throw?ls=s0584f89e7f&w=780&h=90&inject=1&pos=0&rurl=http%3A%2F%2Fwww.16css.com%2Fdivcss%2Fcycss%2F922.html&pn=0&prt=1444458779608&tit=%E5%B7%A7%E7%94%A8css%E7%BE%8E%E5%8C%96select%E4%B8%8B%E6%8B%89%E5%88%97%E8%A1%A8%20%E6%9B%B4%E6%8D%A2%E4%B8%8B%E6%8B%89%E7%AE%AD%E5%A4%B4_%E5%B8%B8%E7%94%A8CSS%E6%8A%80%E5%B7%A7_DIV%2BCSS%E6%95%99%E7%A8%8B_%E4%B8%80%E6%B5%81%E8%B5%84%E6%BA%90%E7%BD%91&pt=1444458779608&cw=1600&jv=1437124819535&inlay=0&link=21&hao360=50&rank=18&t=2&n=21" width="780" height="90" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" align="center,center" allowtransparency="true" style="display: block;">

使用默认的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 >