¿Cómo cambio el resaltado azul en este menú desplegable, por favor?
enlace para seleccionar la demo de la caja
Aquí está el código:
select { border:0; color:#EEE; background:transparent; font-size:20px; font-weight:bold; padding:2px 10px; width:378px; *width:350px; *background:#58B14C; -webkit-appearance: none; } #mainselection { overflow:hidden; width:350px; -moz-border-radius: 9px 9px 9px 9px; -webkit-border-radius: 9px 9px 9px 9px; border-radius: 9px 9px 9px 9px; box-shadow: 1px 1px 11px #330033; background: url("http://sofes.miximages.com/css/arrow.gif") no-repeat scroll 319px 5px #58B14C; } Select an Option Option 1 Option 2
Me gustaría cambiar el color de resaltado a gris si es posible.
Sí, puede cambiar el fondo de la select
pero no podrá cambiar el color de resaltado (cuando pase el mouse) mediante CSS.
Tienes pocas opciones:
Es para convertir select
en ul, li
tipo de seleccionar y hacer lo que quieras con esto.
Use bibliotecas como Choosen , Select2 o jQuery Form Styler . Estos le permiten diseñar de forma mucho más amplia y cruzada.
Creo que está buscando el outline
propiedad de CSS (junto con los atributos de psuedo activos y de desplazamiento):
/* turn it off completely */ select:active, select:hover { outline: none } /* make it red instead (with with same width and style) */ select:active, select:hover { outline-color: red }
Detalles completos de esquema, color de contorno, estilo de contorno y ancho de contorno https://developer.mozilla.org/en-US/docs/Web/CSS/outline
Acabo de encontrar esto mientras busco una solución. Solo lo he probado FF 32.0.3
box-shadow: 0 0 10px 100px #fff inset;
Para ambientar el color del vuelo estacionario y evitar el color predeterminado del sistema operativo en Firefox, debe agregar un cuadro sombreado tanto a la opción de selección como a la opción de selección: declaraciones de desplazamiento, estableciendo el color de la sombra de cuadro en “seleccionar opción” al color de fondo del menú.
select option { background: #f00; color: #fff; box-shadow: inset 20px 20px #f00 } select option:hover { color: #000; box-shadow: inset 20px 20px #00f; }
intenta esto … Sé que es una publicación anterior, pero podría ayudar a alguien
select option:hover, select option:focus, select option:active { background: linear-gradient(#000000, #000000); background-color: #000000 !important; /* for IE */ color: #ffed00 !important; } select option:checked { background: linear-gradient(#d6d6d6, #d6d6d6); background-color: #d6d6d6 !important; /* for IE */ color: #000000 !important; }
Esto funciona para Firefox y Chrome, cae elegantemente al color del sistema en IE. Solo asegúrese de establecer la propiedad del título para el contenido de la opción. Le permite establecer los colores de fondo y primer plano.
select option:checked:after { content: attr(title); background: #666; color: #fff; position: absolute; width: 100%; left: 0; border: none; }
Acabo de encontrar este sitio que ofrece temas geniales para el cuadro de selección http://gregfranko.com/jquery.selectBoxIt.js/
y puedes probar este tema si tu problema con el aspecto general es azul – amarillo – gris