nfznkg
Last Updated: February 25, 2016
·
4.593K
· joaocunha
Dcefb2e14174a2488cdffd7cfa721b2f

How to hide SELECT dropdown's arrow in Firefox with "-moz-appearance: none;"

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):

Buggy select element on Firefox

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

Okay select element on Chrome

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.

Until now.

The fix

Here is the clever workaround to make it work:

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

Firefox select element with no arrow

Voilà! A wild select appears!

Live example

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

<sub>(Firefox only, duh)</sub>

Final considerations

  • Firefox doesn't remove the arrow, it hides it. You will have some white space on the right<sup>[2]</sup> (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.

And it's as hacky easy as that!

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

Follow me on twitter: @joaocunha

<sub><sup>[1]</sup> Thanks to Binyamin for improving it from 1px to 0.01px.</sub>

<sub><sup>[2]</sup> Thanks to RussellUresti for noticing the white space.</sub>

Say Thanks
Respond