html代码:
<select class="db">
<option value ="volvo">volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
下面是修改的css:
select {
/*清除select默认样式*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
-ms-appearance:none;
border:1px solid #CCC;
width:330px;
height:44px;
/*自定义箭头的样式,记得背景一定要加 白色或其他*/
background:url("../img/select.png") no-repeat scroll right center #fff;
/*ie下,原默认的箭头样式还是会显示,所以这里把自定义的样式给去除了*/
background:#fff\9;
color:#666;
padding:8px;
outline:none;
}
ie下定义的行高会有所变动,所以可以自行修改下高度
看了几篇文章都有写到清楚ie的默认样式
/*清除ie的默认选择框样式清除,隐藏下拉箭头*/
select::-ms-expand { display: none; }
,然而我这边测试了并没有实现,暂时推荐在ie下清除自定义样式,如果各位有好的建议,欢迎提出哦!!!