Elemento de estilo basado en la seleccionada

¿Es posible diseñar un elemento de select basado en qué option se selecciona solo con CSS? Estoy al tanto de las soluciones de JavaScript existentes.

Traté de diseñar el elemento de opción en sí, pero esto dará estilo solo al elemento de opción en la lista de opciones, no al elemento seleccionado.

 select[name="qa_contact"] option[value="3"] { background: orange; } 

http://jsfiddle.net/Aprillion/xSbhQ/

Si no es posible con CSS 3, ¿será útil el selector de tema CSS 4 en el futuro? ¿O será esto una fruta prohibida para CSS?

Lamentablemente, sí, esto es algo que actualmente no es posible con solo CSS. Como se menciona en las respuestas y comentarios a esta pregunta , actualmente no hay forma de que el elemento principal reciba el estilo en función de sus elementos secundarios.

Para hacer lo que se necesita, esencialmente se debe detectar cuál de los niños ( ) se selecciona, y luego se le asigna un estilo al padre en consecuencia.

Sin embargo, puede lograr esto con una llamada jQuery muy simple, como se muestra a continuación:

HTML

  

jQuery

 var $select = $('select'); $select.each(function() { $(this).addClass($(this).children(':selected').val()); }).on('change', function(ev) { $(this).attr('class', '').addClass($(this).children(':selected').val()); }); 

CSS

 select, option { background: #fff; } select.foo, option[value="foo"] { background: red; } select.bar, option[value="bar"] { background: green; } 

Aquí hay un jsFiddle de trabajo .

Volver a la pregunta sobre el futuro de los selectores. Sí, los selectores de “Asunto” están destinados a hacer exactamente lo que usted menciona. Si / cuando alguna vez realmente se activan en los navegadores modernos, puede adaptar el código anterior a:

 select { background: #fff; } !select > option[value="foo"]:checked { background: red; } !select > option[value="bar"]:checked { background: green; } 

Como nota al margen, todavía hay debate sobre si el ! debe ir antes o después del tema. Esto se basa en el estándar de progtwigción de !something significa “no algo”. Como resultado, el CSS basado en temas en realidad podría terminar luciendo así en su lugar:

 select { background: #fff; } select! > option[value="foo"]:checked { background: red; } select! > option[value="bar"]:checked { background: green; } 

Entonces aquí es lo que encontré en que es posible . El mayor problema es que después de haber seleccionado un elemento, el color de fondo no cambia porque el elemento seleccionado no se vuelve a dibujar en realidad (parece más prevalente en IE, vaya a la figura). Por lo tanto, aunque seleccione una opción diferente, esa opción no se resalta en la lista cuando vuelve a hacer clic en el elemento de selección.

Para solucionar los problemas de redibujado en IE, se requería cambiar el font-size por una cantidad mínima, + -. 1. La otra cosa, que no parece estar bien documentada, es que la pseudoclase :checked también funciona en los controles de selección.

El violín para mostrar el css agregado que lo hace posible.

Solo jugué brevemente con Chrome y IE9, fyi.

EDITAR: Obviamente, deberá establecer el [valor = “x”] en su valor deseado para resaltar opciones específicas.