2012-03-08 26 views
14

Sto cercando di creare uno stile <select> in firefox. In Chrome ho fatta con:Styling di un elemento selezionato in Firefox

-webkit-appearance: none; 
background: #eeeeee url("../img/select-arrow.jpg") no-repeat center right; 

Ma su Firefox I cant sembrano essere in grado di ottenere lo stesso risultato con

-moz-appearance: none; 
background: #eeeeee url("../img/select-arrow.jpg") no-repeat center right; 

Tutte le idee? Grazie.

risposta

10

Dal Firefox 35, "-moz-appearance:none" che hai già scritto nel codice, infine pulsante freccia rimuovere, se lo desideri.

Era un bug risolto da quella versione.

9

Sembra che questo sia un bug su Firefox: -moz-appearance: nessuno con elemento select. Vedere questo bug report per ulteriori informazioni: https://bugzilla.mozilla.org/show_bug.cgi?id=649849

+0

Grazie! Confermato come un bug! –

+0

Non sono sicuro che sia un "bug" così tanto. Con '-moz-appearance: none' una selezione viene fondamentalmente implementata tramite un DOM anonimo, simile a componenti, che la pagina non può semplicemente stile. –

+4

Non riesco a credere che questo bug non sia stato ancora risolto. – DesignerGuy

2

EDIT [2]: Dato di @ joão-Cunha awesome trick smesso di funzionare in FF30, vedere questa nuova soluzione: http://jsfiddle.net/sstur/2EZ9f/ (sulla base di @ display del keska: correzione flex e un po 'text-shadow magic)

EDIT: Questo può essere fatto utilizzando CSS puro, come dimostrato qui: http://jsfiddle.net/sstur/fm5Jt/

Questo sarà lo stile che in Chrome, Firefox, IE10 + e sarà con grazia degradano nel vecchio IE e altri browser legacy. Utilizza varie soluzioni alternative specifiche del fornitore, tra cui lo -webkit-appearance: none, come indicato.

+1

Sì, lo è: http://stackoverflow.com/a/18317228/1411163 –

4

duplicato esatto come questo: https://stackoverflow.com/a/18317228/1411163

Stessa risposta:

appena capito come rimuovere la freccia di selezione da Firefox. Il trucco è usare un mix di -prefix-appearance, text-indent e text-overflow. È puro CSS e non richiede markup extra.

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

Testato su Windows 8, Ubuntu e Mac, ultime versioni di Firefox.

vivo esempio: http://jsfiddle.net/joaocunha/RUEbp/1/

Altro sul tema: https://gist.github.com/joaocunha/6273016

+0

Grande scoperta João!Ho aggiornato il mio JSFiddle per implementare il tuo trucco e il Webkit e IE per creare una soluzione cross-browser Pure CSS davvero bella. – sstur

Problemi correlati