CSS: pseudo clase seleccionada similar a: marcada, pero para <select> elementos

Question

¿Hay alguna manera de diseñar el elemento <option> actualmente seleccionado en un elemento <select>?

¿Podría dar un color de fondo al elemento de opción actualmente seleccionado? De esa manera puedo diseñar la opción que se puede ver actualmente en el menú desplegable cerrado.

Answer 1

la pseudo-clase :checked se aplica inicialmente a tales elementos que tienen el HTML 4 selected y atributos checked

Fuente: w3.org

---

Por lo tanto, esta CSS obras, aunque el estilo del color no es posible en todos los navegadores:

option:checked { color: red; } 

---

Un ejemplo de esto en acción, ocultando el elemento seleccionado actualmente de la lista desplegable.

option:checked { display:none; }

<select> 
 
    <option>A</option> 
 
    <option>B</option> 
 
    <option>C</option> 
 
</select>

---

Para el estilo de la opción seleccionada en ese momento en el cerrado desplegable, así, usted podría intentar revertir la lógica:

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

Answer 2

En realidad sólo se puede estilo pocas propiedades CSS en : modificado opt elementos de iones color tampoco funciona, background-color, pero puede establecer background-image.

Puede combinar esto con degradados para hacer el truco.

option:hover, 
 
option:focus, 
 
option:active, 
 
option:checked { 
 
    background: linear-gradient(#5A2569, #5A2569); 
 
}

<select> 
 
    <option>A</option> 
 
    <option>B</option> 
 
    <option>C</option> 
 
</select>

Trabajos sobre Gecko/WebKit.

Answer 3

Esto funcionó para mí:

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