How to remove the arrow from a select element in Firefox

Question

I\'m trying to style a select element using CSS3. I\'m getting the results I desire in WebKit (Chrome / Safari), but Firefox isn\'t playing nicely (I\'m not ev

Answer 1

Jordan Young's answer is the best. But if you can't or don't want to change your HTML, you might consider just removing the custom down arrow served to Chrome, Safari, etc and leaving firefox's default arrow - but without double arrows resulting. Not ideal, but a good quick fix that doesn't add any HTML and doesn't compromise your custom look in other browsers.

   First option 
   Second option 

CSS:

select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
  select {
    background-image: none;
  }
}