Styling a select element in Firefox

Question

Im trying to style a <select> in firefox. In chrome I made it with:

-webkit-appearance: none;
background: #eeeeee url("../img/select-arrow.jpg") no-repeat center right;

But on firefox I cant seem to be able to get the same result with

-moz-appearance: none;
background: #eeeeee url("../img/select-arrow.jpg") no-repeat center right;

Any ideas? Thanks.

Answer 1

Since Firefox 35, "-moz-appearance:none" that you already wrote in your code, finally remove arrow button as desired.

It was a bug solved since that version.

Answer 2

Looks like this is bug on Firefox: -moz-appearance:none with select element. See this bug report for more information: https://bugzilla.mozilla.org/show_bug.cgi?id=649849

Answer 3

Exact duplicate as this one: https://stackoverflow.com/a/18317228/1411163

Same answer:

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