domyślny Ukrywanie wybierz strzałkę w Firefoksie 22

Question

Po tej odpowiedzi https://stackoverflow.com/a/17713753/407943

Próbowałem realizacji tego samego rozwiązania, ale to nie działa na moim systemie Windows 7 Firefox 22, to jest to, co mam:

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: oto jsfiddle http://jsfiddle.net/TGBEZ/1/

Answer 1

jest to znany bug z firefox, które nie będą poprawione wkrótce, a może nawet później (patrz: bugzilla).

Jest czystym CSS/HTML obejście:

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

Problem polega na tym, że trzeba będzie aby upewnić się, że te xt nie będzie zbyt duży, w przeciwnym razie dostanie się ponad obraz.

Istnieją również rozwiązania javascript. Spójrz na customselect, wtyczkę jQuery, aby łatwo tworzyć własne selekcje.

Innym znanym wtyczki: chosen

Answer 2

Jest to jedyne rozwiązanie, które naprawdę pracował dla mnie na FF/IE/Chrome:

Customized select dropdown arrow not clickable

Answer 3

UPDATE: tej sztuczki przestał działać z dniem FF 30. Jak dotąd żadna inna poprawka. Miej oczy na aktualizacje full gist.

---

Jak usunąć strzałkę <select> na Firefox:

-moz-appearance:none; nie działa sama. Musisz dodać niektóre text-indent i text-overflow. Tak:

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

żywo przykład: http://jsfiddle.net/joaocunha/RUEbp/1/

dowiedzieć się szczegółów na temat tego GIST: https://gist.github.com/joaocunha/6273016