CSS Custom Dropdown Select, который работает во всех браузерах IE7 + FF Webkit

Я хотел бы сделать собственный выпадающий список, который работает во всех браузерах. Я создал один здесь, но стрелка не кликабельна. Если я установлю его в качестве фона для выбора, то Firefox перезапишет стрелку поверх него. Может кто-нибудь сказать мне, каков наилучший способ получить индивидуально выглядящий выпадающий список, который работает во всех браузерах, и как мне сделать эту кнопку кликабельной без 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>

Ответы на вопрос(6)

Ваш ответ на вопрос