I'm trying to style a select
element using CSS3. I'm getting the results I desire in WebKit (Chrome / Safari), but Firefox isn't playing nicely (I'm not even bothering with IE). I'm using the CSS3 appearance
property, but for some reason I can't shake the drop-down icon out of Firefox.
Here's an example of what I'm doing: http://jsbin.com/aniyu4/2/edit
#dropdown {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: transparent url('example.png') no-repeat right center;
padding: 2px 30px 2px 2px;
border: none;
}
As you can see, I'm not trying for anything fancy. I just want to remove the default styles and add in my own drop-down arrow. Like I said, great in WebKit, not great in Firefox. Apparently, the -moz-appearance: none
doesn't get rid of the drop-down item.
Any ideas? No, JavaScript is not an option
Best Answer
Update: this was fixed in Firefox v35. See the full gist for details.
Just figured out how to remove the select arrow from Firefox. The trick is to use a mix of
-prefix-appearance
,text-indent
andtext-overflow
. It is pure CSS and requires no extra markup.Tested on Windows 8, Ubuntu and Mac, latest versions of Firefox.
Live example: http://jsfiddle.net/joaocunha/RUEbp/1/
More on the subject: https://gist.github.com/joaocunha/6273016