How To Hide The Select Arrow On Firefox.md

How to remove hide the <select> arrow in Firefox using -moz-appearance:none;

tl;dr (or, the fix)

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^[1] 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!

Continue reading for the full lowdown.

Background

I was experimenting on custom styling the <select> elements of a form I was building. One of the things I tried implementing was truncating the text with an ellipsis in case it extended beyond the <select>'s width. It didn't look consistent through browsers, but I've accidentally discovered something really nice.

The bug

Firefox <select> with appearance attribute set to none (Ubuntu):

Chrome <select> with appearance attribute set to none (Ubuntu):

As this 2011 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.

Live example

http://codepen.io/joaocunha/pen/qLgCG

_{(Firefox only, duh)}

Final considerations

• Firefox doesn't remove the arrow, it hides it. You will have some white space on the right^[2] (same width of the now-hidden arrow);
• Chrome removes the arrow by default with -webkit-appearance:none; instead of hiding. No white space on the right;
• Chrome doesn't support the text-overflow:''. No evenly-cut text;
• Your best bet is to set some padding-right in order to provide right space for your styled version of the arrow. Just keep in mind that Firefox will take the ghost arrow width into account;
• Turns out that Windows doesn't require the -moz-appearance: none; declaration at all. Tested on 8;
• Firefox for Android needs the whole width of the arrow as text-indent. It means you need to set it to at least 5px, but take care since Firefox seems to double the text-indent value on <select> elements.
• Zooming out (ctrl mousewheeldown, ctrl -, etc) reveals^[3] the default arrow. No big deal;
• The appearance attribute is not well supported through browsers, so take this fix with a grain of salt when developing your crossbrowser solution.

Support

Ubuntu, Windows, Mac, Android 4.3.

Follow the guy

@joaocunha

_{^[1] Thanks to Binyamin for improving it from 1px to 0.01px.}

_{^[2] Thanks to RussellUresti for noticing the white space.}

_{^[3] Thanks to MathiasaurusRex for noticing the zoom issue.}