Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save ivanvermeyen/9607813 to your computer and use it in GitHub Desktop.
Save ivanvermeyen/9607813 to your computer and use it in GitHub Desktop.

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!

Firefox select element with no 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):

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.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment