修改浏览器select默认样式

修改浏览器select默认样式

   <div class="select">
       <select name="brower">
          <option value="one">新东方培训网站</option>
          <option value="two" selected>在线干部培训网站</option>
       </select>
   </div>

IE10+以及其他浏览器

/*去掉下拉箭头,给select添加背景 */
select {
    width: 260px;
    width: 280px\9\0;  
    height: 36px;
    font-size: 14px;
    color: #6e6e6e;
    padding-left: 10px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: #fff url(img/select.png) no-repeat scroll 96% center;
    box-sizing: border-box;
}
/*去掉ie下select下拉箭头*/
select::-ms-expand {
    display: none; 
}

IE9的处理方式

在IE9浏览器下的样式(目前没有总结完)

方法一

其他浏览器写法：
background-color:#f00;/*all*/
background-color:#0ff\0;/* ie 8/9 */
background-color:#0f0\9\0;/* ie9 */
*background-color:#00f;/*ie7*/
_background-color:#ff0;/*ie6*/
background-color//:#090;/*非IE*/
background-color:#900\9;/*所有ie*/

方法二：(在html的head里)

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->

  <!--[if IE 9]>
    <style>
        select {
            background-position: 90% center !important;
        }
    </style>
  <![endif]-->

/*在select外层添加一个div,比select本身的宽度要短,overflow:hidden把下拉箭头隐藏*/
select {
    width: 280px\9\0;  
}
.select {
    width: 260px;
    overflow: hidden;
    display: inline-block;
    margin-right: 49px;
}