Puis-je styliser une étiquette en fonction de l'état de sa case à cocher en utilisant uniquement CSS ?

Étiquettes de style basées sur l'état de la case à cocher sans JavaScript

Question :

Est-il possible de modifier le style d'une étiquette en fonction de l'état coché de sa case correspondante sans recourir à JavaScript ?

Réponse :

Oui, c'est possible en utilisant le combinateur frère adjacent en CSS.

Explication :

En utilisant le combinateur frère adjacent ( ), vous pouvez cibler les éléments qui suivent immédiatement un élément spécifié. Dans ce cas, nous l'utilisons pour styliser les étiquettes (.label-for-check) qui sont adjacentes aux cases cochées (.check-with-label:checked).

Exemple :

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

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

Dans cet exemple, lorsque la case avec l'ID "idinput" est cochée, le label "My Label" qui la suit deviendra en gras. En effet, l'étiquette remplit les conditions suivantes :

• Elle est adjacente à une case cochée en raison du combinateur.
• Elle correspond au sélecteur de classe .label-for-check.

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!