Style a <label> na podstawie stanu <input>

Question

Czy jest możliwe, aby tylko CSS, styl etykiety HTML w zależności od stanu wejścia?

W moim przypadku chcę ustawić styl <input type="checkbox"> w zależności od tego, czy jest zaznaczony.

Próbowałem umieścić etykietę w wejściu, ale Firefox i Chrome (przynajmniej) wydaje się analizować je jako rodzeństwo, mimo że są wyraźnie zagnieżdżone w źródle wejściowym. I nie wiem, jak napisać regułę CSS, która może pośrednio poprzez atrybut for =.

Czy muszę usunąć kod Javascript z tego?

Answer 1

Nie trzeba ich zagnieżdżać, tak jest w przypadku elementu "for" w elemencie etykieta >.

W nowoczesnych przeglądarek (tych wspierających CSS 2.1), można użyć selektora rodzeństwo, takich jak

input + label { 
    /* rules */ 
} 

Trzeba by mieć swój znaczników w ścisłej relacji między rodzeństwem, takich jak:

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

Answer 2

Korzystanie z przylegającą/rodzeństwo selektor plus selektor atrybutu pozwoliłoby to działa:

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