如何用css修改select下拉列表框默认样式

前一段时间做下拉选择框的时候，因为用的谷歌浏览器调试，感觉默认的还是挺美观的，但是后来用其他浏览器做测试的时候发现并不是那回事，有些浏览器自带的下拉选择小三角就挺不好看的（比如Firefox..）。

以往的办法就是设置select的边框为none，背景设成透明(background: transparent;)，这时候你会看到边框没有了，但是小三角还是在的。再在select外面加个div，固定死div的宽度，并且加超出隐藏属性(overflow: hidden;)再设置select的宽度，大于div的宽度，小三角会隐藏掉。如果又想要小三角那岂不费劲？

所以，在这篇文章分享里，我将介绍如何不依赖JS用纯CSS来改变下拉列表框的默认样式。

Mobile 和现代浏览器的解决方案

我们看到默认的下载选择框在Firefox和Chrome中是有些不同的

Chrome 和 Firefox 中分别是这样的：

当然，上面看到的我已经清掉了border，在没有清掉外边框的时候外面是有一个默认边框的。其实可以看到谷歌自带的样式还是挺不错的，但是火狐可能就不那么美观了（我当前使用的是52.0版本的），其他浏览器测试结果我就不放上来了大致相同，有兴趣的可以自行测试啊。

废话不多说，其实用下列CSS就可以解决，原理就是将浏览器默认的下拉框样式清除，然后应用上自己的，再附一张向右对齐小箭头的图片即可。

select {
 　　/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
 　　border: solid 1px #000;

 　　/*很关键!将默认的select选择框样式清除*/
 　　appearance:none;
 　　-moz-appearance:none;
 　　-webkit-appearance:none;

 　　/*在选择框的最右侧中间显示小箭头图片*/
 　　background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;

 　　/*为下拉小箭头留出一点位置，避免被文字覆盖*/
 　　padding-right: 14px;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }

注：这篇文章参考http://uplifted.NET/programming/change-default-select-dropdown-style-just-css但文中所述固定了select下拉框的宽度和高度，因此对此进行了修改。

查看演示地址：http://jsbin.com/piravo/edit?html,css,output

更新：针对旧版IE的解决方案

评论中提到 IE8/9并不支持 appearance:none CSS属性，想要支持的话可能需要非常特殊的方法，参考SF：我们需要为其添加一个父容器，容器是用来覆盖小箭头的，然后为select添加一个向右的小偏移或者宽度大于父级元素。设置父级的CSS属性为超出部分不可见，即可覆盖即小箭头。然后再为父级容器添加背景图片即可。overflow: hidden并不能隐藏下拉框的显示。

#HTML#
<div id="parent">
　　<select>
　　　　<option>what</option>
　　　　<option>the</option>
　　　　<option>hell</option>
　　</select>
</div>

#CSS#
#parent {
　　background: url('yourimage') no-repeat;
　　width: 100px;
　　height: 30px;
　　overflow: hidden;
}
#parent select {
　　background: transparent;
　　border: none;
　　padding-left: 10px;
　　width: 120px;
　　height: 100%;
}

演示地址： http://jsbin.com/yuxame/edit?html,css,output