HTML <select> opción seleccionada color de fondo estilo CSS

¿Hay un estilo para el color "seleccionado" de una opción de selección? Por ejemplo:HTML <select> opción seleccionada color de fondo estilo CSS

<HTML> 
<BODY> 
<FORM NAME="form1"> 
<SELECT NAME="mySelect" SIZE="7" style="background-color:red;"> 
<OPTION>Test 1 
<OPTION>Test 2 
<OPTION>Test 3 
<OPTION>Test 4 
<OPTION>Test 5 
<OPTION>Test 6 
<OPTION>Test 7 
</SELECT> 
</FORM> 
</BODY> 
</HTML>

Cuando selecciono una opción se vuelve azul, quiero modificar esto y lo convierten en un color diferente. En el estilo, esperaba algo como "color seleccionado", pero no existe.

Fuente

2010-03-08 arieltools

posible duplicado de [color de fondo Opción Cambio Seleccionar lista en vuelo estacionario] (http://stackoverflow.com/questions/10484053/change-select-list -option-background-color-on-hover) – doppelgreener

Es posible que no pueda hacer esto usando CSS puro. Pero, un pequeño javascript puede hacerlo bien.

Una forma cruda para hacerlo -

var sel = document.getElementById('select_id'); 
sel.addEventListener('click', function(el){ 
    var options = this.children; 
    for(var i=0; i < this.childElementCount; i++){ 
     options[i].style.color = 'white'; 
    } 
    var selected = this.children[this.selectedIndex]; 
     selected.style.color = 'red'; 
    }, false);

Fuente

2010-03-08 15:13:58

+1 si nos puede decir cómo. –

ok, déjame intentar :) –

@ J.Hendrix: lo que he publicado funciona. Pero será mejor usar las bibliotecas JS, para que se ejecute en todos los navegadores. actualmente funciona bien en Chrome y Firefox en Linux. –

Actualmente CSS no es compatible con esta característica.

Puede crear uno propio o utilizar un complemento que emule este comportamiento utilizando DIVs/CSS.

Fuente

2010-03-08 14:55:35

No se puede confiar en la CSS para elementos de formulario. Los resultados varían ampliamente en todos los navegadores. No creo que Safari te permita personalizar ningún elemento de formulario.

Su mejor opción es utilizar un complemento como jqTransform (utiliza jQuery).

EDITAR: esa página no parece estar funcionando en este momento. También hay Custom Form Elements que admite MooTools y puede admitir jQuery en el futuro.

Fuente

2010-03-08 15:44:06 DisgruntledGoat

Sí, tendría que ser así si no se puede ir con jQuery. Aclamaciones. – arieltools

@ari: hay bastantes de estos complementos a la vista - Acabo de ver dos nuevos hoy: http://swizec.com/code/styledButton/ y http://pixelmatrixdesign.com/uniform/ – DisgruntledGoat

Todos estos enlaces a las bibliotecas están rotas – ejectamenta

En principio, puede darle forma utilizando la opción [seleccionada] como selector, pero eso no funciona en muchos navegadores. Además, eso solo le permite diseñar la opción seleccionada, no la opción que tiene el foco de desplazamiento.

probado para funcionar en Chrome 9 y Firefox 3.6, no funciona en Internet Explorer 8.

Fuente

2011-02-19 07:52:49

<select name=protect_email size=1 style="background: #009966; color: #FFF;" onChange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor">  
<option value=0 style="background: #009966; color: #FFF;" selected>Protect my email</option>; 
<option value=1 style="background: #FF0000; color: #FFF;">Show email on advert</option>; 
</select>;

http://pro.org.uk/classified/Directory?act=book&category=120

lo probó en FF, Opera, Konqueror funcionó bien ...

Fuente

2011-04-10 16:30:04

esa es una gran idea –

eso es genial ... @MehmetErenYener –

esta sintaxis funcionará en XHTML y no funciona en IE6, pero esta es una forma no-javascript:

option[selected] { background: #f00; }

Si quieres hacer esto sobre la marcha, entonces deberías ir con javascript, de la manera que otros han sugerido ...

Fuente

2012-09-26 12:46:27 rizwaniqbal

-1

En CSS:

Option: comprobado {background-color: red; }

Fuente

2015-02-23 11:21:45

Este CSS no funciona en absoluto. –

pseudo selector seleccionado en o ¿etiqueta de selección? – DannyG

Prueba este código, cuando se expande el objeto de selección, el valor seleccionado aparece en color rojo: \t \t \t \t \t \t \t \t –

-4

Podemos anular el color azul en nuestro color personalizado Funciona para Internet Explorer, Firefox y Chrome:

Al utilizar este por debajo siguiente CSS:

option: checked, option: hover { 
    Color: #ffffff; 
    background: #614767 repeat url("data:image/gif;base64,R0lGODlh8ACgAPAAAGFGZQAAACH5BAAAAAAALAAAAADwAKAAAAL+hI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBkpOUlZaXmJmam5ydnp+QkaKjpKWmp6ipqqusra6voKGys7S1tre4ubq7vL2+v7CxwsPExcbHyMnKy8zNzs/AwdLT1NXW19jZ2tvc3d7f0NHi4+Tl5ufo6err7O3u7+Dh8vP09fb3+Pn6+/z9/v/w8woMCBBAsaPIgwocKFDBs6fAgxosSJFCtavIhRVgEAOw"); 
}

Fuente

2015-11-25 06:40:13 Rajendra

me di cuenta que es una publicación anterior, pero en caso de que ayude, puede aplicar este CSS para que IE11 dibuje un contorno punteado para la indicación de foco de un elemento <select> para que se asemeje a la indicación de foco de Firefox: select:focus::-ms-value { background: transparent; color: inherit; outline-style: dotted; outline-width: thin; }

Fuente

2016-08-15 11:32:16

Creo que la solución es posible estado buscando es:

option:checked { 
    box-shadow: 0 0 10px 100px #FFFF00 inset; }

Fuente

2017-02-06 13:24:50

HTML <select> opción seleccionada color de fondo estilo CSS

Respuesta

Cuestiones relacionadas