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

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

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/
#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>