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

Réponses:

147

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.

Andrew Marshall
la source
2
Cela ne fonctionnera pas dans IE 6-8, à moins qu'OP ne se soucie pas d'IE.
Hussein
25
Je sais, j'ai noté que cela ne fonctionnerait que dans les navigateurs modernes dans ma réponse.
Andrew Marshall
4
@ inf3rno Il devrait. Le sélecteur et le :checkedsélecteur frères adjacents sont répertoriés comme pris en charge dans IE9. Les propres documents de Microsoft le confirment.
Andrew Marshall
3
bonne solution, mais si l'élément label n'est pas le prochain ancêtre, vous devriez essayer d'utiliser le sélecteur ~ au lieu du sélecteur + 456bereastreet.com/archive/200601/css_3_selectors_explained (dernier dans le tableau)
Karl Adler
@abimelex Bien qu'en fonction de votre code HTML, cela peut finir par correspondre à beaucoup plus de <label>s que souhaité.
Andrew Marshall
101

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/

Walter Rumsby
la source
Il existe une astuce pour changer la couleur d'arrière-plan de l' étiquette parent d'une case cochée. Faire le trop - plein d'étiquette: caché, puis donner la case à cocher une très grande ... dropshadow :checked { box-shadow: 0 0 0 500px orange; }. Vous devrez jouer avec les z-index pour vous assurer que les éléments frères ne sont pas cachés.
Aaron Cicali
8

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>
Développer l'extrait

Teocci
la source
-24

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/

Hussein
la source
8
La question disait une manière non javascript et la réponse avant de vous montrer clairement une méthode qui fonctionne en utilisant uniquement css
Kevin
2
La solution acceptée utilise le sélecteur frère adjacent qui est en fait une fonctionnalité de CSS 2.1 .
Walter Rumsby
JQuery est la seule solution qui garantira la prise en charge de plusieurs navigateurs.
Hussein
7
Soyez prudent là Hussein. Vous pouvez fournir une prise en charge pour les navigateurs comme Internet Explorer 6 qui ne prennent pas en charge le sélecteur frère adjacent à l'aide de JavaScript . jQuery est une bibliothèque JavaScript qui vous aidera à le faire; il existe d'autres bibliothèques (ou même du JavaScript pur!) avec lesquelles vous pouvez le faire.
Simon Lieschke
Re: mon commentaire précédent, je ne savais pas que le :checkedpseudo-sélecteur est une fonctionnalité CSS3.
Walter Rumsby