Hiding default select arrow in Firefox 22

Question

Following this answer https://stackoverflow.com/a/17713753/407943

I've tried implementing the same solution but it does not work on my Windows 7 Firefox 22, this is what I get:

select {
    -moz-appearance: window;
    -webkit-appearance: none;
    background: #f5f5f5 url("/images/arrow_down.png") right center no-repeat;
    padding-right: 20px;
}
@-moz-document url-prefix() {
.wrapper {
     background: #f5f5f5 url("/images/arrow_down.png") right center no-repeat;
     padding-right: 20px;
  }
}

EDIT: here's a jsfiddle http://jsfiddle.net/TGBEZ/1/

Answer 1

Update: this trick stopped working as of FF 30. No other fix so far. Keep your eyes on the full gist for updates.

---

How to remove the <select> arrow on Firefox:

-moz-appearance:none; doesn't work by itself. You need to add some text-indent and text-overflow. Like this:

select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

Live example: http://jsfiddle.net/joaocunha/RUEbp/1/

Learn the details on this gist: https://gist.github.com/joaocunha/6273016

Answer 2

This is a known bug of firefox which won't be corrected soon, or maybe even later (see this bugzilla).

There is a pure CSS/HTML workaround :

HTML :

<div class="styled">
    <select></select>
</div>

CSS :

div.styled {
    overflow: hidden;
    padding: 0;
    margin: 0;
}

div.styled select {
    width: 115%;
    background-color: rgba(0, 0, 0, 0);
    background-image: none;
    -webkit-appearance: none;
    border: none;
}

The Fiddle

The problem here is that you will have to make sure the text won't be too large, otherwise it will get over the image.

Also, there are javascript solutions. Take a look at customselect, a jQuery plugin to easily create your own selects.

Another famous plugin : chosen