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

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.

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 */

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.

Questo ha funzionato per me:

select option {
   color: black;
}
select:not(:checked) {
   color: gray;
}