CSS: pseudoclase seleccionada similar a: comprobada, pero para elementos <select>

¿Hay alguna forma de aplicar estilo al <option>elemento seleccionado actualmente en un <select>elemento?

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

la :checkedpseudoclase se aplica inicialmente a los elementos que tienen HTML4 selectedy checkedatributos

Fuente: w3.org

Entonces, este CSS funciona, aunque el estilo colorno 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 diseñar también la opción seleccionada actualmente en el menú desplegable cerrado , puede intentar invertir la lógica:

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

En realidad, solo puede aplicar estilo a algunas propiedades CSS en : elementos de opción modificados . colortampoco funciona, background-colorpero puede configurar un 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>

Funciona en gecko / webkit.

Esto funcionó para mí:

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