Chciałbym utworzyć niestandardową listę rozwijaną, która działa we wszystkich przeglądarkach. Stworzyłem tutaj, ale strzałka nie jest klikalna. Jeśli ustawię go jako tło dla zaznaczenia, firefox nadpisze strzałkę nad nim. Czy ktoś może mi powiedzieć, jaka jest najlepsza technika, aby uzyskać niestandardowe rozwijane menu rozwijane, które działa we wszystkich przeglądarkach i jak mogę sprawić, by pokrętło było klikalne bez Javascript?

http://jsfiddle.net/DJDf8/1/

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>