[css] What is the correct "-moz-appearance" value to hide dropdown arrow of a <select> element

I'm trying to style the dropdown arrow of a <select> element with CSS only , it works perfectly in Chrome/Safari:

select {
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;

  background-image: url('./select-arrow1.png') ;
  background-position: center right;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  margin: 0;
  padding-top: 2px;
  padding-bottom: 2px;
  width: 200px;
}

Which renders beautifully as seen here

By that logic, the only thing I had to do to make it work in Firefox was to add all -webkit-* stuff as -moz-* :

-moz-appearance: button;
-moz-border-radius: 2px;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-padding-end: 20px;
-moz-padding-start: 2px;
-moz-user-select: none;

It works for 99%, the only problem is that the default dropdown arrow doesn't go away, and stays on top of the background image as seen here

It looks like -moz-appearance: button; does not work for a <select> element. Also -moz-appearance: none; has no effect to remove the default dropdown arrow.

So what is the correct value for -moz-appearance to remove the default dropdown arrow?

Updates:

December 11, 2014: Stop inventing new hacks. After 4 and a half years, -moz-appearance:none is starting to work since Firefox 35. Although moz-appearance:button is still broken, you don't need to use it anyway. Here is a very basic working example.

April 28, 2014: The mentioned css hack worked for a couple of months but since the begining of April 2014 this bug is creeping back into Firefox 31.0.a1 Nightly on all platforms.

While you can't yet get Firefox to remove the dropdown arrow (see MatTheCat's post), you can hide your "stylized" background image from showing in Firefox.

-moz-background-position: -9999px -9999px!important;

This will position it out of frame, leaving you with the default select box arrow – while keeping the stylized version in Webkit.

To get rid of the default dropdown arrow use:

-moz-appearance: window; 

it is working when adding :

select { width:115% }

It is worth trying these 2 options below while we're still waiting for the fix in FF35:

select {
    -moz-appearance: scrollbartrack-vertical;
}

or

select {
    -moz-appearance: treeview;
}

They will just hide any arrow background image you have put in to custom style your select element. So you get a bog standard browser arrow instead of a horrible combo of both browser arrow and your own custom arrow.

Try putting opacity:0; your select element will be invisible but the options will be visible when you click on it.

In Mac OS -moz-appearance: window; will remove the arrow accrding to the MDN docs here: https://developer.mozilla.org/en-US/docs/CSS/-moz-appearance. Tested on Firefox 13 on Mac OS X 10.8.2. Also see: https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c21.

Update: this was fixed in Firefox v35. See the full gist for details.

== how to hide the select arrow in Firefox ==

Just figured out how to do it. The trick is to use a mix of -prefix-appearance, text-indent and text-overflow. It is pure CSS and requires no extra markup.

select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

Long story short, by pushing it a tiny bit to the right, the overflow gets rid of the arrow. Pretty neat, huh?

More details on this gist I just wrote. Tested on Ubuntu, Mac and Windows, all with recent Firefox versions.