Hiding the select arrow on Firefox 30.0

Important: This post was initially posted on June 2014.
I recently bumped into a select arrow issue for Firefox 30.0, the default select drop-down arrow can no longer be hidden in order to achieve a custom select arrow look.

As most web developers out there at some point will bump into a custom select element, and there is little to no documentation about Firefox version 30.0, I felt like this post could be beneficial.

If you have used a Firefox hack before to hide the default select arrow, it most likely would have looked as something like this:
webkit-appearance:none;
appearance:none;
text-indent: 1px;
text-overflow: '';

Although browser hacks like these still work for Chrome and Internet Explorer, this fix and all other old CSS hacks no longer work on Firefox 30.0.

It’s not a bug, get used to it?

This has been identified as a bug since the update of Firefox (June 18th), you can follow the official bug report here on Bugzilla.

Although many see this as a bug and are expecting to see it fixed soon, it feels like the Firefox developers are giving the impression this is not a bug but a choice, and will possibly not be fixed for this version or following versions of Firefox.

The reason, they feel like the select CSS element is an element that should not be altered. It should be clear for users, browsers, and devices alike that it’s a select element, browser hacking in order to receive the visual appearance you want is frowned upon and should be prevented.

Firefox select arrow workaround after version 30.0

There are a few options out there if you really need a fix for the default Firefox arrow, although some of these options are not plausible in all circumstances. As time goes by, I keep checking new possibilities and adding them to this post!

Option 1 (new), this fix works on any Firefox version and responsive layout

Rodrigo-Ludgero posted a fix on Github a few days ago, including an online demo. I tested this demo on Firefox 30.0 and it appears to be working correctly. Tested on Chrome as well.

Here’s a preview of the output select arrow, to view the code, click here.

As you can tell, the default Firefox arrow is hidden, and a Font awesome arrow is displayed instead (could be changed to a custom image).

This option seems to be the best fix out there for now!

Option 2, push out the default arrow and hide it

As James points out on the Team Tree House forum, you can give the select element a wider width (such as 110%) to push the default arrow out of the visual area. Note, this only works when the parent div has a position CSS element and an overlay:none style.

View the post here.
View a demo here.