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.

To get rid of the default dropdown arrow use:

-moz-appearance: window; 

Try putting opacity:0; your select element will be invisible but the options will be visible when you click on it.

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.

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.

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.

it is working when adding :

select { width:115% }