主要针对右边的箭头进行优化,因为不同的浏览器默认的右边的箭头不一样,但是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"); }页面实现的最终样式新闻热点
疑难解答