Tôi đang cố gắng thay thế mũi tên của một lựa chọn bằng một hình ảnh của riêng tôi. Tôi đang bao gồm vùng chọn trong một div có cùng kích thước, tôi đặt nền của vùng chọn là trong suốt và tôi đưa một hình ảnh (có cùng kích thước với mũi tên) ở góc trên cùng bên phải của div làm nền.
Nó chỉ hoạt động trong Chrome.
Làm cách nào tôi có thể làm cho nó hoạt động trong Firefox và IE9 khi tôi nhận được điều này:
.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;
}<HTML>
<HEAD>
</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>