css3 select 美化

主要针对右边的箭头进行优化，因为不同的浏览器默认的右边的箭头不一样，但是ie9不支持 appearance:none;，所以ie9以及以下版本就用js写一下，不优化，使用默认的样式

html页面代码：

<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>

css样式：

select {
border: solid 1px #000;
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
padding-right: 14px;
background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll        right center transparent;
/* background:white\9\0;*/
}

select::-ms-expand {
display: none;
background: none;

}  /*去除ie浏览器默认的select样式*/

js代码：

if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE9.0")
{
$("select").css("background","none");
}

页面实现的最终样式
![这里写图片描述](http://img.blog.csdn.net/20170204163617263?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzAxODM1Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)