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.

---

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.

---

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 ) has been allocated to another project (b2g) for the time being and wont have time until that project get nearer to completion.

Third, even when that person has the time again, there is no guarantee that this will be a priority because, despite webkit having this, it breaks the spec for how 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!

---

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.

---

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.

---

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.

---

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% }