css - atributos - Estilo<select> elemento basado en<option> seleccionado

select html

Question

¿Es posible aplicar un estilo a un elemento de select función de qué option se selecciona solo con CSS? Soy consciente de las soluciones existentes de JavaScript .

Intenté aplicar estilo al elemento de opción en sí, pero esto le 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, ¿ el selector de temas de CSS 4 ayudará en el futuro o seguirá siendo una fruta prohibida para CSS?

Answer 1

Así que 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 está realmente redibujado (parece más predecible en IE: imagínate). Por lo tanto, aunque seleccione una opción diferente, esa opción no se resaltará en la lista cuando vuelva a hacer clic en el elemento seleccionado.

Para corregir los problemas de redibujado en IE, era necesario cambiar el font-size en una cantidad mínima, + -. 1. La otra cosa, que no parece estar bien documentada, es que la pseudo clase :checked también funciona en los controles de selección.

El fiddler para mostrar el css agregado que lo hace posible.

Solo jugué brevemente con él en Chrome e IE9, fyi.

EDITAR: Obviamente, deberá establecer [valor = "x"] en el valor deseado para el resaltado de una opción específica.

Answer 2

Desafortunadamente, sí, esto es algo que actualmente no es posible solo con CSS. Como se mencionó en las respuestas y comentarios a esta pregunta , actualmente no hay manera de hacer que el elemento padre reciba un estilo basado en sus hijos .

Para hacer lo que estás buscando, básicamente deberías detectar cuál de los hijos ( <option> ) está seleccionado, y luego diseñar al padre como corresponde.

Sin embargo, podría lograr esto con una llamada jQuery muy simple, de la siguiente manera:

HTML

<select>
  <option value="foo">Foo!</option>
  <option value="bar">Bar!</option>
</select>

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 que funciona .

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, podría 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 ! Debería ir antes o después del tema. Esto se basa en el estándar de programación de !something significa "no algo". Como resultado, el CSS basado en el sujeto podría terminar pareciéndose a esto:

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