gistfile1.md

How to remove <select> dropdown's arrow in Firefox

As this bug report states, there is an issue regarding Firefox's -moz-appearance and <select> elements: it was supposed to ditch the <select>'s arrow (like Chrome's implementation) but it simply doesn't. People were raging about the subject all over the internetz.

Until now.

I figured out a clever workaround to make it work on Firefox. Here is how to do it:

1. Set -moz-appearance to none. This will "reset" the styling of the element;
2. Set text-indent to 0.01px. This will "push" the text a tiny bit to the right¹;
3. Set text-overflow to '' (an empty string). This will change anything that extends beyond the element's width to... nothing - and this includes the infamous arrow!

Check out the snippet:

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

See a live example:

http://jsfiddle.net/4WVZW/

And that's it!

No images, no extra markup, no javascript.

Tested on Ubuntu, Windows 8 and Mac, all with recent versions (20.x.x at least).

Follow me on twitter: @joaocunha

_{¹ Thanks for Binyamin for improving it from 1px to 0.01px.}