Cambio de color de realce <select>

Question

¿Cómo se cambia el color de resaltado de <select> que es el color que destaca <li> mientras el cursor pasa sobre él mediante el uso de CSS?

Answer 1

Ni idea de lo que quiere decir sobre "el color que resalta <li> ", pero parece que quiere cambiar el color de fondo de los elementos <option>. Lo intenté y no funciona, siempre obtienes el color del sistema.

Si quisiera poner de relieve todo el elemento <select> en mouseover, esto funciona un poco:

select:hover { background-color: red; } 

Sin embargo, el comportamiento es diferente en diferentes navegadores. Por ejemplo, Chrome no resalta las opciones en el menú desplegable; Firefox lo hace, pero luego no los cambia de nuevo si alejas el mouse y aún se tiran hacia abajo.

Como se ha indicado en muchas, muchas preguntas similares, no se puede aplicar un estilo fiable a los controles. See here para más detalles.

Answer 2

Puede utilizar los: hover pseudo-clase

por ejemplo

.classOfElementToColor:hover {background-color:red; color:black} 

Funciona con la mayoría de navegadores, pero no en todos los elementos en IE6

Answer 3

Simplemente utiliza este selector CSS:

select option:hover { 
    background-color: yellow; 
} 

Answer 4

Como se mencionó anteriormente, el establecimiento de background-color trabajará sin embargo :hover está libre de errores en IE7 - el establecimiento de su tipo de documento a la estricta ayudará.

Answer 5

No se puede cambiar el color de resaltado de las opciones a través de algo así como ->background:#f9f9f9

Usted puede hacer algo como esto:

  select > option:hover{ 
       box-shadow: 0 0 10px 100px #FED20F inset; 
       transition: all .2s ease-in-out; 
      }