Ich versuche, den Pfeil einer Auswahl durch ein eigenes Bild zu ersetzen. Ich füge die Auswahl in ein Div mit derselben Größe ein, ich setze den Hintergrund der Auswahl als transparent und ich füge ein Bild (mit derselben Größe wie der Pfeil) in die rechte obere Ecke des Div als Hintergrund ein.
Es funktioniert nur in Chrome.
Wie kann ich dafür sorgen, dass es in Firefox und IE9 funktioniert, wo ich Folgendes bekomme:
.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>