修改浏览器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;
}