Comment styliser les cases à cocher avec CSS sans…

Pour styliser une case à cocher sans bibliothèques, vous pouvez utiliser une combinaison de masquer l'élément standard et de styliser les pseudo-éléments ::before ou ::after associés à la <label> parente.

Masquer la case à cocher standard :

input[type="checkbox"] {
  display: none; /* ou visibility: hidden; height: 0; width: 0; */
}

Créer un "carré" stylisé avec le pseudo-élément <label> :

input[type="checkbox"] + label::before {
  content: ''; /* Nécessaire pour afficher le pseudo-élément */
  display: inline-block;
  width: 1em; /* Taille du carré */
  height: 1em; /* Taille du carré */
  border: 1px solid #ccc; /* Bordure du carré */
  margin-right: 0.5em; /* Espace entre le carré et le texte */
  vertical-align: middle; /* Alignement vertical */
  /* Autres styles optionnels : background-color, border-radius, box-shadow */
}

Style pour l'état coché :

Utilisez le sélecteur checked pour input et modifiez les styles du pseudo-élément label en conséquence.

input[type="checkbox"]:checked + label::before {
  background-color: #007bff; /* Couleur de fond lorsque coché */
  border-color: #007bff; /* Couleur de la bordure lorsque coché */
  /* Autres styles optionnels */
}

Ajouter une "check" (ou autre indicateur) :

Vous pouvez utiliser un second pseudo-élément (::after) ou styliser l'existant ::before avec background-image (svg, data-url) ou styles de bordure.

Exemple avec border pour créer une coche :

input[type="checkbox"]:checked + label::after {
  content: '';
  display: inline-block;
  width: 0.4em; /* Largeur de la ligne de la coche */
  height: 0.7em; /* Hauteur de la ligne de la coche */
  border-right: 2px solid white; /* Partie droite de la coche */
  border-bottom: 2px solid white; /* Partie inférieure de la coche */
  transform: rotate(45deg); /* Rotation pour former la coche */
  position: absolute; /* Pour positionner à l'intérieur de ::before */
  top: 0.1em; /* Ajustement de la position */
  left: 0.3em; /* Ajustement de la position */
  /* La position relative peut être nécessaire sur label::before */
}

Pour que le dernier exemple fonctionne correctement, ajoutez position: relative; à input[type="checkbox"] + label::before :

input[type="checkbox"] + label::before {
  /* ... styles précédents ... */
  position: relative; /* Ajouté pour positionner ::after */
}

Cette approche offre un contrôle total sur l'apparence de la case à cocher et une bonne accessibilité, car l'élément standard existe toujours et réagit aux actions de l'utilisateur (clic, focus). Il est important de lier input et label avec les attributs id et for pour un fonctionnement correct lors du clic sur le texte de l'étiquette.

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Je suis d'accord avec les termes</label>

Comment styliser les cases à cocher avec CSS sans utiliser de bibliothèques?