remove default select box arrow in firefox

Question

I have to remove the default select box arrow in firefox I used the below code

-webkit-appearance: none;
-moz-appearance:none; 
background: rgba(0,0,0,0);

its working good in chrome. but its not working in firefox.

Answer 1

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

---

Just figured out how to remove the select arrow from Firefox. 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: '';
}

Tested on Windows 8, Ubuntu and Mac, latest versions of Firefox.

Live example: http://jsfiddle.net/joaocunha/RUEbp/1/

More on the subject: https://gist.github.com/joaocunha/6273016