CSS Personnalisé menu Déroulant, Sélectionnez qui fonctionne sur tous les navigateurs IE7+ FF Webkit

Je voudrais faire un custom liste déroulante qui fonctionne sur tous les navigateurs. J'ai créé un ici, mais la flèche n'est pas cliquable. Si je l'ai mis comme fond pour la sélectionner, puis firefox va remplacer une flèche sur le dessus de cela. Quelqu'un peut-il me dire quelle est la meilleure technique pour obtenir une mesure à la recherche déroulante qui fonctionne sur tous les navigateurs et comment puis-je faire que la molette cliquable sans Javascript?

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

CSS:

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;
}

HTML:

<span style="position:relative;">
         <span class="arrow" ></span>
<select id="menulist">
         <option value="one">One</option>
         <option value="two">Two</option>
</select>
</span>

InformationsquelleAutor Faz Ya | 2013-08-06