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

Question

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

Posso quindi assegnare un colore di sfondo all'elemento opzione attualmente selezionato? In questo modo posso impostare l'opzione che è attualmente visibile nel menu a discesa chiuso.

Answer 1

il :checked pseudo-classe si applica inizialmente a tali elementi che hanno la HTML4 selected e checked attributi

Fonte: w3.org

---

Quindi, questo funziona CSS, anche se lo styling dei color non è 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 lo stile l'opzione selezionata nel chiuso discesa così, si potrebbe provare a invertire la logica:

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

Answer 2

In realtà si può solo stile alcune proprietà CSS su : modificato opt elementi ionici. color non funziona, background-color, ma è possibile impostare un background-image.

È possibile accoppiare questo 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>

Opere su Gecko/WebKit.

Answer 3

questo ha funzionato per me:

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