Mettez en surbrillance l'étiquette si la case est cochée

Existe-t-il un moyen non javascript de changer la couleur d'une étiquette lorsque la case correspondante est cochée?

Si tu as

<div>
  <input type="checkbox" class="check-with-label" id="idinput" />
  <label class="label-for-check" for="idinput">My Label</label>
</div>

tu peux faire

.check-with-label:checked + .label-for-check {
  font-weight: bold;
}

Voyez cela fonctionner . Notez que cela ne fonctionnera pas dans les navigateurs non modernes.

J'aime la suggestion d'Andrew, et en fait la règle CSS ne doit être que:

:checked + label {
   font-weight: bold;
}

J'aime me fier à l'association implicite de l' élément labelet de l' inputélément, donc je ferais quelque chose comme ceci:

<label>
   <input type="checkbox"/>
   <span>Bah</span>
</label>

avec CSS:

:checked + span {
    font-weight: bold;
}

Exemple: http://jsfiddle.net/wrumsby/vyP7c/

Voici un exemple d'utilisation de la :checkedpseudo-classe pour rendre les formulaires plus accessibles. La :checkedpseudo-classe peut être utilisée avec des entrées masquées et leurs étiquettes visibles pour créer des widgets interactifs, tels que des galeries d'images. J'ai créé le snipped pour les personnes qui veulent tester.

input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
} 
input[type=checkbox]:checked + label {
  color: #f00;
  font-style: normal;
} 

<input type="checkbox" id="cb_name" name="cb_name"> 
<label for="cb_name">CSS is Awesome</label> 

Vous ne pouvez pas faire cela avec CSS seul. En utilisant jQuery, vous pouvez faire

HTML

<label id="lab">Checkbox</label>
<input id="check" type="checkbox" />

CSS

.highlight{
    background:yellow;
}

jQuery

$('#check').click(function(){
    $('#lab').toggleClass('highlight')
})

Cela fonctionnera dans tous les navigateurs

Vérifiez l'exemple de travail sur http://jsfiddle.net/LgADZ/