CSS Custom Dropdown Select, который работает во всех браузерах IE7 + FF Webkit
Я хотел бы сделать собственный выпадающий список, который работает во всех браузерах. Я создал один здесь, но стрелка не кликабельна. Если я установлю его в качестве фона для выбора, то Firefox перезапишет стрелку поверх него. Может кто-нибудь сказать мне, каков наилучший способ получить индивидуально выглядящий выпадающий список, который работает во всех браузерах, и как мне сделать эту кнопку кликабельной без Javascript?
CSS:
#menulist {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 32px;
border: 1px solid #000;
width: 260px;
text-indent: 8px;
}
.arrow {
cursor: pointer;
height: 32px;
width: 24px;
position: absolute;
right: 0px;
background-color: #c8c8c8;
background: url('http://icons.aniboom.com/Energy/Resources/userControls/TimeFrameDropDownFilter/Dropdown_Arrow.png') 0;
}
<span style="position:relative;">
<span class="arrow" ></span>
<select id="menulist">
<option value="one">One</option>
<option value="two">Two</option>
</select>
</span>