¿Es posible cambiar el color de fondo predeterminado de una opción de lista de selección al desplazarse?Cambiar lista de selección Opción color de fondo en el control deslizante
HTML:
<select id="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
He tratado option:hover { background-color: red; }, pero no sirve de nada. ¿Alguien sabe cómo hacer esto?
Los elementos Select/Option se representan por el SO, no HTML. No puedes cambiar el estilo de estos elementos.
Esta es una pregunta muy antigua. Si va a agregar una respuesta en este punto, al menos complétela o apóyelo con una referencia ... –
Esto se puede hacer implementando una sombra de cuadro insertada. por ejemplo:
select.decorated option:hover {
box-shadow: 0 0 10px 100px #1882A8 inset;
}
Aquí, .decorated es una clase asignada a la caja de selección.
Espero que entiendas el punto.
+1 ¡Gran idea! Pero 'option: checked' funciona mejor que' option: hover'. Sin embargo, parece que solo funcionan solo en Firefox. – Oriol
¿Hay algo que funcione en Chrome? – GumZ
Mi enfoque era simplemente hacer un elemento completamente diferente que se comportara como un elemento 'seleccionar'. Básicamente un div con una lista adentro. – Diogo
esto es lo que necesita, el combinador niño:
select>option:hover
{
color: #1B517E;
cursor: pointer;
}
Pruébalo, funciona perfecto.
Aquí está la referencia: http://www.w3schools.com/css/css_combinators.asp
En Firefox, el estilo predeterminado es 'option: checked {background-color: -moz-html-cellhighlight! Important; color: -moz-html-cellhighlighttext! important; } ' Entonces, el problema es que no puede anular una propiedad interna importante, ¡incluso si usa! Important. – Oriol
No funciona en Chrome. – Lev
Comprendo que esto es una cuestión mayor, pero recientemente me encontré con esta necesidad y se le 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;
}
Quizás esto ayude a alguien más.
Esto no funciona, simplemente porque el color de fondo _es sobrescrito_ por el sistema operativo. Esto es equivalente a usar 'option: hover'. No del todo: el guión se rompe si empiezo a usar el teclado mientras el mouse se mueve sobre una opción, por lo que no es robusto. – doppelgreener
La implementación de una inserción CSS caja de sombra funciona en Firefox:
select option:checked,
select option:hover {
box-shadow: 0 0 10px 100px #000 inset;
}
elemento de opción Chequeado funciona en Chrome:
select:focus > option:checked {
background: #000 !important;
}
no funciona en Chrome – deemi
En FF también CSS filtro funciona bien. P.ej. hue-rotación:
option {
filter: hue-rotate(90deg);
}
no funciona en Chrome – deemi
El problema es que incluso JavaScript hace no ver el elemento option se cernía. Esto es sólo para poner énfasis en la forma en que no va a ser resuelto (en el corto plazo al menos) utilizando sólo CSS:
window.onmouseover = function(e)
{
console.log(e.target.nodeName);
}
El única manera de resolver este problema (además de esperar un milenios para los proveedores de navegadores para corregir 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 con un elemento ul y el uso de un elemento radioinput por elemento li.
En algunos navegadores es posible, en otros no lo es. Por lo general, los elementos de la forma son representados por el sistema operativo y no por el navegador, por lo que el CSS no siempre se aplica (o incluso 'raramente'). –
en qué navegadores es posible? – vipin8169