Comment puis-je mettre en surbrillance les étiquettes des cases à cocher en utilisant uniquement CSS ?

Mise en surbrillance des étiquettes avec des cases cochées à l'aide de CSS

La personnalisation de l'apparence des étiquettes en fonction de l'état de leurs cases à cocher correspondantes est une exigence courante dans le Web développement. Bien que JavaScript offre des solutions, il existe une astuce CSS intéressante qui peut obtenir cet effet sans aucun script.

Pour mettre en surbrillance une étiquette lorsque sa case associée est cochée, nous pouvons utiliser le combinateur frère adjacent (" "). Ce combinateur sélectionne un élément qui se trouve immédiatement après l'élément de référence, nous permettant de cibler l'étiquette juste après chaque case à cocher.

Exemple de code :

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

Dans ce code, nous utilisons la pseudo-classe :checked pour sélectionner les cases cochées et utilisons le combinateur " " pour cibler l'étiquette adjacente avec la classe .label-for-check. En définissant la propriété font-weight sur bold, nous mettons en surbrillance l'étiquette lorsque la case correspondante est cochée.

Structure HTML :

Pour utiliser ce code, assurez-vous d'avoir la structure HTML suivante :

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

En utilisant cette technique CSS simple, vous pouvez facilement mettre en évidence les étiquettes en tirant parti de l'état coché de leurs cases à cocher associées, offrant ainsi une interface plus interactive. et une expérience utilisateur visuellement attrayante.

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!