我试图替换一个选择的箭头与我自己的图片。我将选择包含在相同大小的div中，我将选择的背景设置为透明，我在div的右上角包含一个图片(与箭头相同的大小)作为背景。
它只能在Chrome中使用。
我如何使它在Firefox和IE9的工作在我得到这个：
<HTML>
<HEAD>
<style type="text/css">
.styled-select {
width: 100px;
height: 17px;
overflow: hidden;
overflow: -moz-hidden-unscrollable;
background: url(images/downarrow_blue.png) no-repeat right white;
border: 2px double red;
display: inline-block;
position:relative;
}
.styled-select select {
background: transparent;
-webkit-appearance: none;
width: 100px;
font-size: 11px;
border: 0;
height: 17px;
position: absolute;
left: 0;
top: 0;
}
body { background-color:#333333;color: #FFFFFF;}
.block label{ color:white; }
</style>
</HEAD>
<BODY>
<p/>
<form action="/prepareUpdateCategoryList.do?forwardto=search">
<fieldset class="block" id="searchBlock">
<p>
<label style="width:80px">Class</label>
<div class="styled-select">
<select property="voucherCategoryClass" >
<option value="0">Select </option>
<option value="7382">steam </option>
</select>
</div>
</p>
</fieldset>
</form>
</BODY>
</HTML>
解决方法
你试过这样的事情：
.styled-select select {
appearance:none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
}
没有测试，但应该工作。
编辑：看起来Firefox仍然不支持此功能(read more here)
