CSS seul peut-il styliser une étiquette en fonction de l'état de sa case à cocher associée ?

Modification de l'apparence d'une étiquette en fonction de l'état de la case à cocher sans JavaScript

Le CSS peut-il être exploité pour contrôler l'apparence d'une étiquette en fonction de l'état - coché ou décoché - de ses associés case à cocher ?

Approche :

Pour réaliser cette modification sans JavaScript, le combinateur frère adjacent de CSS peut être utilisé. En définissant une règle CSS qui cible l'élément d'étiquette adjacent à un élément de case à cocher coché, des modifications de style spécifiques peuvent être appliquées lorsque la case à cocher est dans son état coché.

Illustration du code :

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

Dans cet extrait de code, la règle CSS cible tout élément d'entrée avec un nom de classe "check-with-label" dans son état vérifié. Le combinateur frère adjacent " " est utilisé pour sélectionner l'étiquette avec un nom de classe "label-for-check" qui suit la case cochée.

Lorsque la case "check-with-label" est cochée, le "label-for-check" verra la modification de style spécifiée appliquée, dans ce cas rendant son poids de police plus gras.

Exemple Balisage :

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

Conclusion :

L'emploi du combinateur frère adjacent en CSS fournit une méthode cohérente pour modifier l'apparence d'une étiquette en fonction de l'état de l'élément de case à cocher qui l'accompagne, éliminant ainsi le besoin de JavaScript dans ce scénario spécifique.

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!