I'm keeping this gist for historical reasons, as it helped substantially to get this bug fixed. Make sure to read the edits below.
Edit 4: Mozilla released Firefox v35 and, indeed, the bug is patched. https://developer.mozilla.org/en-US/Firefox/Releases/35
Edit 3: Mozilla addressed the issue! Target milestone is v35. Yay!
Edit: this trick stopped working as of Firefox 30 realeased in 2014-06-10. Join the comments section to help finding an alternative, and please upvote the bug on Bugzilla for a definitive fix. If you now have double arrows on Firefox, this might solve your issue.
Don't use any other value of
-moz-appearance as the styles inherited are not customisable.
none. This will "reset" the styling of the element;
0.01px. This will "push" the text a tiny bit to the right;
''(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.
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 discovered something nice.
appearance attribute set to
appearance attribute set to
As this 2011 bug report states, there is an issue regarding Firefox's
<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.
(Firefox only, duh)
- Firefox doesn't remove the arrow, it hides it. You will have some white space on the right (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-rightin 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
widthof 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
- Zooming out (ctrl mousewheeldown, ctrl -, etc) reveals the default arrow. No big deal;
appearanceattribute is not well supported through browsers, so take this workaround with a grain of salt when developing your crossbrowser solution.
Tested on latest versions of Ubuntu, Windows, Mac and Android.
Binyamin for improving it from 1px to 0.01px.
RussellUresti for noticing the white space.
MathiasaurusRex for noticing the zoom issue.