Hiding default select arrow in Firefox 22
css, firefox
Solution
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
Problem
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/