What is the correct "-moz-appearance" value to hide dropdown arrow of a <select> element
CssFirefoxWebkitGeckoCss Problem Overview
I'm trying to style the dropdown arrow of a <select>
element with CSS only , it works perfectly in Chrome/Safari:
select {
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url('./select-arrow1.png') ;
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
margin: 0;
padding-top: 2px;
padding-bottom: 2px;
width: 200px;
}
Which renders beautifully as seen here
By that logic, the only thing I had to do to make it work in Firefox was to add all -webkit-*
stuff as -moz-*
:
-moz-appearance: button;
-moz-border-radius: 2px;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-padding-end: 20px;
-moz-padding-start: 2px;
-moz-user-select: none;
It works for 99%, the only problem is that the default dropdown arrow doesn't go away, and stays on top of the background image as seen here
It looks like -moz-appearance: button;
does not work for a <select>
element. Also -moz-appearance: none;
has no effect to remove the default dropdown arrow.
So what is the correct value for -moz-appearance
to remove the default dropdown arrow?
Updates:
December 11, 2014: Stop inventing new hacks. After 4 and a half years, -moz-appearance:none
is starting to work since Firefox 35. Although moz-appearance:button
is still broken, you don't need to use it anyway. Here is a very basic working example.
April 28, 2014: The mentioned css hack worked for a couple of months but since the begining of April 2014 this bug is creeping back into Firefox 31.0.a1 Nightly on all platforms.
Css Solutions
Solution 1 - Css
Update: this was fixed in Firefox v35. See the full gist for details.
== how to hide the select arrow in Firefox ==
Just figured out how to do it. The trick is to use a mix of -prefix-appearance
, text-indent
and text-overflow
. It is pure CSS and requires no extra markup.
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Long story short, by pushing it a tiny bit to the right, the overflow gets rid of the arrow. Pretty neat, huh?
More details on this gist I just wrote. Tested on Ubuntu, Mac and Windows, all with recent Firefox versions.
Solution 2 - Css
This is it guys! FIXED!
Wait and see: https://bugzilla.mozilla.org/show_bug.cgi?id=649849
or workaround
For those wondering:
https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c59
> First, because the bug has a lot of hostile spam in it, it creates a hostile workplace for anyone who gets assigned to this. > > Secondly, the person who has the ability to do this (which includes rewriting is supposed to work (This is what I was told, I do not personally know the spec)
Now see https://wiki.mozilla.org/B2G/Schedule_Roadmap ;)
The page no longer exists and the bug hasn't be fixed but an acceptable workaround came from João Cunha, you guys can thank him for now!
Solution 3 - Css
To get rid of the default dropdown arrow use:
-moz-appearance: window;
Solution 4 - Css
Try putting opacity:0; your select element will be invisible but the options will be visible when you click on it.
Solution 5 - Css
In Mac OS X, -moz-appearance: window;
will remove the arrow accrding to the MDN documentation appearance (-moz-appearance, -webkit-appearance).
It was tested on Firefox 13 on Mac OS X v10.8.2 (Mountain Lion). Also see: 649849 - Make -moz-appearance:none on a combobox remove the dropdown button.
Solution 6 - Css
It is worth trying these two options below while we're still waiting for the fix in Firefox 35:
select {
-moz-appearance: scrollbartrack-vertical;
}
Or
select {
-moz-appearance: treeview;
}
They will just hide any arrow background image you have put in to custom style your select element. So you get a bog-standard browser arrow instead of a horrible combination of both the browser arrow and your own custom arrow.
Solution 7 - Css
While you can't yet get Firefox to remove the dropdown arrow (see MatTheCat's post), you can hide your "stylized" background image from showing in Firefox.
-moz-background-position: -9999px -9999px!important;
This will position it out of frame, leaving you with the default select box arrow – while keeping the stylized version in Webkit.
Solution 8 - Css
it is working when adding :
select { width:115% }