CSS Custom Dropdown Select that works across all browsers IE7+ FF Webkit

Question

I would like to make a custom dropdown that works across all the browsers. I created one here but the arrow is not clickable. If I set it as the background for the select, then firefox will overwrite an arrow on top of it. Can someone tell me what's the best technique to get a custom looking dropdown that works across all the browsers and how do I make that knob clickable without 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>

question from:https://stackoverflow.com/questions/18092123/css-custom-dropdown-select-that-works-across-all-browsers-ie7-ff-webkit

Answer 1

This is very simple, you just need to add a background image to the select element and position it where you need to, but don't forget to add:

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

According to http://shouldiprefix.com/#appearance

Microsoft Edge and IE mobile support this property with the -webkit- prefix rather than -ms- for interop reasons.

I just made this fiddle http://jsfiddle.net/drjorgepolanco/uxxvayqe/