How to remove the arrow from a <select> tag in Firefox
#dropdown {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 2px 30px 2px 2px;
    border: none;
    background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat right center;
}
	
select {
    overflow:hidden;
    width: 120%;
}
	
-moz-appearance: window;
	
select {
  -webkit-appearance: normal;
  -moz-appearance: normal;
  appearance: normal;
}
.selectwrap { position: relative; }
.selectwrap:before {
  content: "";
  height: 0;
  width: 0;
  border: .9em solid red;
  background-color: red;
  position: absolute;
  right: -.1em;
  z-index: 42;
}
	
.select { 
    opacity : 0;
    width: 200px;
    height: 15px;
}

<select class='select'>
    <option value='foo'>bar</option>    
</select>
	
.div {
    width: 200px;
    height: 15px;
    position: absolute;
    z-index: 0;
}

<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
    <option value='foo'>bar</option>    
</select>
	
$('.select').click(function(event)) { 
    $('.div').html($('.select option:selected').val());
}
	
body {
scrollbar-face-color: #6685CA; 
scrollbar-highlight-color: #6685CA; 
scrollbar-shadow-color: #6685CA; 
scrollbar-3dlight-color:#FFFFFF;
scrollbar-arrow-color:#FFFFFF; 
scrollbar-track-color:#E5E5E5; 
scrollbar-drakshadow-color:#000000;
}