css - Hiding default select arrow in Firefox 22 -

following answer https://stackoverflow.com/a/17713753/407943

i've tried implementing same solution not work on windows 7 firefox 22, 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 jsfiddle http://jsfiddle.net/tgbez/1/

update: trick stopped working of ff 30. no other fix far. keep eyes on full gist updates.

---

how remove <select> arrow on firefox:

-moz-appearance:none; doesn't work itself. need add text-indent , text-overflow. this:

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

live example: http://jsfiddle.net/joaocunha/ruebp/1/

learn details on gist: https://gist.github.com/joaocunha/6273016