मैं अपनी खुद की तस्वीर के साथ एक चयन के तीर को बदलने की कोशिश कर रहा हूं। मैं एक ही आकार के साथ एक div में चयन को शामिल कर रहा हूं, मैंने चयन की पृष्ठभूमि पारदर्शी के रूप में सेट की है और मैं पृष्ठभूमि के रूप में div के दाहिने शीर्ष कोने में एक तस्वीर (तीर के समान आकार) के साथ शामिल हूं।
यह केवल क्रोम में काम करता है।
मैं इसे फ़ायरफ़ॉक्स और IE9 में कैसे काम कर सकता हूँ जहाँ मुझे यह मिल रहा है:
.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>