Comment puis-je styliser les étiquettes en fonction de l'état des cases à cocher en utilisant uniquement CSS ?

Étiquettes de style basées sur l'état des cases à cocher sans JavaScript

De nombreux scénarios de développement Web impliquent l'affichage d'informations basées sur la saisie de l'utilisateur. Un exemple courant consiste à basculer l’apparence d’une étiquette lorsque la case correspondante est cochée ou décochée. Bien que JavaScript fournisse un moyen simple d'y parvenir, cet article explore une solution CSS pure.

Le combinateur frère adjacent

La clé de cette technique réside dans le combinateur frère adjacent ( ). Ce sélecteur vous permet de cibler les éléments adjacents et précédés par un autre élément dans l'arborescence logique DOM. Dans notre cas, nous souhaitons cibler l'élément label qui vient immédiatement après la case à cocher.

Considérez la structure HTML suivante :

<div>
  <input type="checkbox" class="check-with-label">

Style de l'étiquette

Maintenant, en utilisant le combinateur frère adjacent, nous pouvons écrire des règles CSS qui ciblent l'élément label uniquement lorsque sa case précédente est cochée :

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

Ceci La règle stipule que tout élément avec la classe "check-with-label" qui est dans un état coché aura son élément frère adjacent avec la classe "label-for-check" stylé avec une police de caractères en gras.

Exemple :

L'application de ces règles CSS à l'exemple HTML donné entraînera quelque chose comme ceci :

<div>
  <input type="checkbox" class="check-with-label">

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

Sortie :

My Label (bold)

Dans ce cas, "Mon étiquette" sera affichée en gras car la case précédente est cochée , indiquant que cette technique CSS pure modifie avec succès l'apparence de l'étiquette en fonction de l'état de la case à cocher.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!