◄ Retour à l'article

Galerie au clic sans JavaScript

Le petit exemple suivant montre comment modifier le contenu de la balise label associée à la checkbox en utilisant la pseudo-classe :checked. On en profite également pour afficher/masquer une image.

Case non cochée Votre navigateur ne prend pas en charge la pseudo class :checked

Le code HTML :

<input type="checkbox" id="id_checkbox" value="oui">
<label for="id_checkbox">Case <span id="span_non">non </span>cochée</label>
<img src="http://www.developpez.net/template/images/logo.png" alt="log DVP">

Le code CSS :

/* style du contenu du label par défaut */
label{
  color:#888;
  font-style:italic;
}
img{
  position:absolute;
  top:2em;
  right:1em;  
  display:none;
}
/* modification du style du contenu du label */
:checked +label{
  color:#000;
  font-style:normal;
  font-weight:bold;
}
/* on en profite pour supprimer le non */
:checked +label span{
  display:none;
}
/* affichage de l'image */
:checked ~ img{
  display:block;
}