html格式:
<div class="select-input">
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
css:
.select-input{
width:180px;
padding:5px;
font-family: "Helvetica-Light";
font-size: 9pt;
color:#2a2a2a;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-o-appearance: none;
background: #ffffff url(".../images/select-arrow.png") no-repeat;
background-position:143px center;
overflow:hidden;
}
.select-input{
border-style:solid;
border-width:thin;
border-color: #DDDDDD;
margin-top:5px;
}
在小提琴中查看我的演示
我定制了下拉框的箭头,它在Chrome、FF、Opera等屏幕截图中运行良好,但在ie9和ie8中不起作用。在ie9与ie8中,我得到了fiddle中的输出,因此如何定制FF中的外观
最后更新:工作演示
好吧,为了在IE中设置样式,您可能需要获取实际的
看起来Internet Explorer中不支持外观属性-这就是问题所在。
IE上的下拉箭头有一个伪元素。请尝试添加此CSS(为您的页面定制)。
.select-control::-ms-expand {
display: none;
}