:checked

La pseudo-classe :checked de CSS cible les éléments qui se trouvent dans un état sélectionné. Elle est associée uniquement aux éléments <input> du type radio et checkbox. La pseudo-classe :checked cible les types d'input radio et checkbox lorsqu'ils sont activés. S'ils ne sont pas sélectionnés ou cochés, ils ne sont pas ciblés.

Donc, lorsqu'une case à cocher est… cochée, si vous ciblez le label qui suit :

//CSS
input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
}

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

… le texte passera de l'italique gris à un style de police normal et rouge.

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

Cochez la case pour voir l'effet en action :

C'est un petit exemple de l'utilisation de la pseudo-classe :checked permettant de rendre les formulaires accessibles. Cette pseudo-classe peut être utilisée avec des champs de saisie cachés et leur label visible, afin de construire des widgets interactifs tels que des galeries d'images.


À lire également sur La Cascade :

Astuces CSS avec checkbox, par Will Boyd


Autres ressources à consulter sur ce sujet :


Cet article est pour l'essentiel tiré de l'almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l'auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l'auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d'une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d'articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C'est aussi une source d'inspiration pour vos propres designs.