主要针对右边的箭头进行优化,因为不同的浏览器默认的右边的箭头不一样,但是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)