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

Question

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.

Answer 1

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.