Style a <label> basierend auf seinem s Zustand

Question

Ist es möglich, mit nur CSS, ein HTML-Label abhängig von seinem Zustand der Eingabe style?

In meinem Fall möchte ich eine <input type="checkbox"> basierend darauf, ob es überprüft wird.

Ich habe versucht, das Etikett in die Eingabe zu setzen, aber Firefox und Chrome (zumindest) scheint sie als Geschwister zu analysieren, obwohl sie eindeutig in der Eingabequelle verschachtelt sind. Und ich weiß nicht, wie man eine CSS-Regel schreibt, die durch ein for = -Attribut indirekt sein kann.

Muss ich das Javascript auf diesem einen rausholen?

Answer 1

Sie müssen nicht verschachtelt sein, dafür steht das "for" -Attribut im <Label> Element.

In modernen Browsern (die Unterstützung CSS 2.1), können Sie ein Geschwister-Selektor, wie

input + label { 
    /* rules */ 
} 

Sie müssen Ihr Markup in einer strengen Geschwisterbeziehung haben würden, wie zum Beispiel:

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

Answer 2

den benachbarten/Geschwister Wähler und das Attribut Selektor würde es funktioniert:

<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>