CSS: pseudo classe selezionata simile a: verificata, ma per elementi <select>


86

C'è un modo per definire lo stile <option>dell'elemento attualmente selezionato in un <select>elemento?

Potrei quindi dare un colore di sfondo all'elemento opzione attualmente selezionato? In questo modo posso definire lo stile dell'opzione attualmente visualizzabile nel menu a discesa chiuso.

Risposte:


123

la :checkedpseudo-classe inizialmente si applica a tali elementi che hanno HTML4 selectede checkedattributi

Fonte: w3.org


Quindi, questo CSS funziona, anche se lo stile di colornon è possibile in tutti i browser:

option:checked { color: red; }

Un esempio di ciò in azione, nascondendo l'elemento attualmente selezionato dall'elenco a discesa.

option:checked { display:none; }
<select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>


Per modellare anche l'opzione attualmente selezionata nel menu a discesa chiuso , potresti provare a invertire la logica:

select { color: red; }
option:not(:checked) { color: black; } /* or whatever your default style is */

5
L'hai testato? Non sembra funzionare per me su FF8. aggiornamento: non funziona neanche in Chromium 15.
Brigante

1
@emmett l'ho controllato anch'io in Chrome 16. Come ho detto nel mio commento precedente, modella l'opzione selezionata nell'elenco a discesa, ma non quella nell'area visibile chiusa.
Web_Designer

2
@Web_Designer Ok, vedo il problema. Ho modificato la mia risposta con un'altra soluzione (traballante).
Emmett

la risposta accettata non funziona per me in Chrome. puoi testare qui: jsfiddle.net/hk4s0ech
Andre Chenier

18

In realtà puoi applicare lo stile solo a poche proprietà CSS su : elementi di opzione modificati . colornon funziona, background-colorma puoi impostare un file background-image.

Puoi accoppiarlo con gradienti per fare il trucco.

option:hover,
option:focus,
option:active,
option:checked {
  background: linear-gradient(#5A2569, #5A2569);
}
<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Funziona su gecko / webkit.


La risposta accettata non ha funzionato per me, ma questa soluzione ha funzionato. Grazie!
Anthony Hilyard

Nota che puoi anche applicare un filtro in questo modo: Opzione: verificato {filtro: scala di grigi (1);} Questo è simile a come oggigiorno puoi applicare lo stile alle caselle di controllo e ai pulsanti radio in Chrome per renderli non blu.
KS74

3

Questo ha funzionato per me:

select option {
   color: black;
}
select:not(:checked) {
   color: gray;
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.