html - poner - Cambiar el color de fondo de la opción Seleccionar lista al desplazarse

como poner color de fondo en html en bloc de notas

Question

¿Es posible cambiar el color de fondo predeterminado de una opción de lista de selección en el vuelo estacionario?

HTML:

<select id="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

He intentado la option:hover { background-color: red; } option:hover { background-color: red; } , pero no sirve de nada. ¿Alguien sabe cómo hacer esto?

Answer 1

El problema es que incluso JavaScript no ve el elemento de option suspendido. Esto es solo para poner énfasis en cómo no va a ser resuelto (al menos pronto) usando solo CSS:

window.onmouseover = function(e)
{
console.log(e.target.nodeName);
}

La única forma de resolver este problema (además de esperar un milenio para que los proveedores de navegadores corrijan errores, y mucho menos uno que aflige lo que estás tratando de hacer) es reemplazar el menú desplegable con tu propio HTML / XML usando JavaScript. Esto probablemente implique el uso de reemplazar el elemento select por un elemento ul y el uso de un elemento de input radio por elemento li .

Answer 2

En FF también el filtro CSS funciona bien. Por ejemplo, hue-rotar:

option {
filter: hue-rotate(90deg);
}

https://jsfiddle.net/w3a740jq/4/

Answer 3

Esto se puede hacer implementando una sombra de cuadro insertada. p.ej:

select.decorated option:hover {
box-shadow: 0 0 10px 100px #1882A8 inset;
}

Aquí, .decorated es una clase asignada al cuadro de selección.

Espero que entiendas el punto.

Answer 4

Implementar un recuadro de inserción shadow CSS funciona en Firefox:

select option:checked,
select option:hover {
box-shadow: 0 0 10px 100px #000 inset;
}

El elemento de opción comprobado funciona en Chrome:

select:focus > option:checked {
background: #000 !important;
}

Answer 5

Los elementos Select / Option son renderizados por el SO, no HTML. No puedes cambiar el estilo de estos elementos.

Answer 6

Me doy cuenta de que esta es una pregunta anterior, pero recientemente descubrí esta necesidad y se me ocurrió la siguiente solución usando jQuery y CSS:

jQuery(''select[name*="lstDestinations"] option'').hover(
function() {
jQuery(this).addClass(''highlight'');
}, function() {
jQuery(this).removeClass(''highlight'');
}
);

y el css:

.highlight {
background-color:#333;
cursor:pointer;
}

Tal vez esto ayude a alguien más.

Answer 7

esto es lo que necesitas, el combinador infantil:

 select>option:hover
{
color: #1B517E;
cursor: pointer;
}

Pruébalo, funciona perfecto.

Aquí está la referencia: http://www.w3schools.com/css/css_combinators.asp