Ich möchte ein benutzerdefiniertes Dropdown erstellen, das in allen Browsern funktioniert. Ich habe hier eine erstellt, aber der Pfeil kann nicht angeklickt werden. Wenn ich es als Hintergrund für die Auswahl festgelegt habe, überschreibt Firefox einen Pfeil darüber. Kann mir jemand sagen, was die beste Technik ist, um ein benutzerdefiniertes Dropdown-Menü zu erhalten, das in allen Browsern funktioniert, und wie kann ich diesen Knopf ohne Javascript anklickbar machen?

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>