How to remove the arrow from a select element in Firefox

Question

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 ev

Answer 1

The appearance property from CSS3 does not allow none value. Take a look at the W3C reference. So, what you is trying to do isn't valid (indeed Chrome shouldn't accept too).

Then unfortunatelly we really don't have any cross-browser solution to hide that arrow using pure CSS. As pointed, you will need JavaScript.

I suggest you to consider using selectBox jQuery plugin. It's very lightweight and nicely done.