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:white9;*/
}


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)