Estilo a <label> según el estado de <input>

Question

¿Es posible, con solo CSS, aplicar estilo a una etiqueta HTML en función del estado de su entrada?

En mi caso, quiero diseñar un <input type="checkbox"> según si está marcado.

Intenté poner la etiqueta dentro de la entrada, pero Firefox y Chrome (al menos) parecen analizarlos como hermanos, a pesar de que están claramente anidados en la fuente de entrada. Y no sé cómo escribir una regla de CSS que pueda indirectamente a través de un atributo for =.

¿Debo sacar el Javascript de este?

Answer 1

No es necesario que estén anidados, para eso está el atributo "para" en el elemento < de la etiqueta >.

En los navegadores modernos (los que apoyan CSS 2.1), puede utilizar un selector de hermanos, como

input + label { 
    /* rules */ 
} 

Usted tendría que tener su margen de beneficio en una estricta relación de hermanos, como por ejemplo:

<input name="cb" id="cb" type="checkbox"><label for="cb">Checkbox</label> 

Answer 2

Uso del selector adyacente/hermanos más el selector de atributos sería hacer que funcione:

<form> 
    <style> 
    INPUT[checked=checked] + LABEL { 
     color: #f00;  
    } 
    </style> 
    <div> 
     <input type="checkbox" id="chk1" /> 
     <label for="chk1">Label #1</label> 
    </div> 
    <div> 
     <input type="checkbox" id="chk2" checked="checked" /> 
     <label for="chk2">Label #2</label> 
    </div> 
</form>