Élégante boite à cocher «checkbox» et bouton «radio» en pure CSS

Voilà un tutoriel très simple. Simple, mais combien utile ! Quel site n’a pas de formulaire et quel formulaire n’a pas de boite à cocher ? On connait tous le truc qui utilise l’élément « checkbox » pour garder en mémoire une valeur booléenne, et ce sans aucun langage script, en pure CSS. C’est exactement la même technique pour personnaliser ou normaliser, sur toutes les plateformes et navigateurs, la boite à cocher et le bouton radio.

On commence par retirer de la page l’élément par défaut, plutôt laid et surtout différent selon le navigateur. Et on utilise ensuite le « label » avec ses caractéristiques « focus » et « checked » pour construire de toute pièce le nouvel élément à l’aide des sélecteurs « before » et « after ».

Et voilà, un des principaux problèmes visuels de réglés en quelques lignes de CSS sans aucune ligne de JavaScript ni autre dépendance.

La base

La première chose à faire c’est de normaliser le CSS en combinant le « padding » et la bordure avec les dimensions de l’élément (width/height), le fameux « border-box ». Noter que cette étape est inutile si votre code dépend d’un cadriciel comme Bootstrap, qui le fait déjà par défaut.

*, *::before, *::after {
  box-sizing: border-box;
}

Une boite à cocher fonctionne avec une étiquette, le label, qui permet de faire basculer la boite à cocher entre son état coché et non coché.

<input id="maMoiteAcocher" type="checkbox" />
<label for="maMoiteAcocher">Ma boite à cocher</label>

Résultat

Ma boite à cocher

Pour m’assurer de ne pas altérer de facto toutes les boites à cocher de la page, je donne un mon de classe :

<input class="cPerso" id="maMoiteAcocher" type="checkbox" />
<label class="cEtiquette" for="maMoiteAcocher">Ma boite à cocher</label>

Donc la première étape consiste à retirer l’élément <input> de la page. On pourrait simplement le rendre invisible avec display: none mais certains navigateurs risquerait de l’ignorer comme les lecteurs d’écran ou encore la navigation par tabulation au clavier. En changeant la position, c’est-à-dire en positionnant l’élément à l’extérieur de l’écran (de la page visible), l’élément <input> demeure dans le flux du document sans être visible.

/* Retrait des boite à cocher et des boutons radio */
input.cPerso[type="checkbox"], input.cPerso[type="radio"] {
  position: absolute;
  left: -9999px;
}

Tout est prêt pour personnalisation

Tout d’abord styliser l’étiquette. Essentiellement lui donner une position « relative » pour permettre un positionnement « absolu » de ses enfants (before et after). Ajuster le curseur et appliquer une marge à gauche pour permettre l’affichage du carré de la boite à cocher ou du rond du bouton radio.

/* Étiquette */
.cEtiquette {
  display: block;
  position: relative;
  margin: 10px 0;
  padding-left: 35px;
  cursor: pointer;
}

Ensuite, donner une position absolue aux ::before et ::after de l’étiquette :

/* Positionner l'imitation checkbox et radio */
.cEtiquette::before, .cEtiquette::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
}

Créer la nouvelle boite à cocher et le nouveau bouton radio :

/* Rond du radio */
input.cPerso[type="radio"] + .cEtiquette::before,
input.cPerso[type="radio"] + .cEtiquette::after {
  border-radius: 50%;
}

L’idée est de cibler le premier (+) ::before et ::after du bouton radio « cPerso » et d’utiliser la bordure pour dessiner l’élément (que l’on verra dans le prochain bout de code). border-radius: 50%; permets à cette bordure de créer un cercle parfait pour le bouton radio.

Et de donner une dimension, par exemple 20 x 20 pixels et une bordure (2 pixels) à l’élément. Noter que c’est ici que l’on retrouve la couleur par défaut (sans être coché).

/* Dimension et bordure du checkbox et radio */
.cEtiquette::before {
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #f5f5f5;
}

Puis ajouter le milieu (rond ou carré) mais sans l’afficher pour l’instant (display: none;). C’est ici que l’on détermine la couleur du milieu :

/* Milieu du checkbox et radio une fois coché */
.cEtiquette::after {
  display: none;
  width: 12px;
  height: 12px;
  margin: 4px;
  background-color: #c6c3bd;
}

La « Programmation »

Le CSS3 permet carrément de la programmation. Bon ce n’est pas tout à fait vrais, mais c’est tout comme et d’ailleurs c’est précisément ici que l’on se passe de JavaScript. Le secret, les pseudo-classe focus et checked.

Premièrement, changer la couleur de la bordure une fois le « focus » sur l’élément :

/* Change la couleur de la bordure en focus */
input.cPerso:focus + .cEtiquette::before {
  border-color: #c6c3bd;
}

Et enfin, affichez le milieu caché et défini plus haut :

/* Affichage du milieu du checkbox et radio une fois cochés */
input.cPerso:checked + .cEtiquette::after {
  display: block;
}

C’est tout !! Deux lignes de CSS pour obtenir l’effet tant recherché.

Code complet

<style>
*, *::before, *::after {
  box-sizing: border-box;
}

input.cPerso[type="checkbox"], input.cPerso[type="radio"] {
  position: absolute;
  left: -9999px;
}

.cEtiquette {
  display: block;
  position: relative;
  margin: 10px 0;
  padding-left: 35px;
  cursor: pointer;
}

.cEtiquette::before, .cEtiquette::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
}

input.cPerso[type="radio"] + .cEtiquette::before,
input.cPerso[type="radio"] + .cEtiquette::after {
  border-radius: 50%;
}

.cEtiquette::before {
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #f5f5f5;  
}

.cEtiquette::after {
  display: none;
  width: 12px;
  height: 12px;
  margin: 4px;
  background-color: #c6c3bd;
}

input.cPerso:focus + .cEtiquette::before {
  border-color: #c6c3bd;
}

input.cPerso:checked + .cEtiquette::after {
  display: block;
}
</style>

<body>
  <label>Comment trouvez-vous les Trucsweb?</label>
     
  <input class="cPerso" id="oAppreciation0" name="oAppreciation" type="radio" />
  <label for="oAppreciation0" class="cEtiquette">Pas fort</label>
      
  <input class="cPerso" id="oAppreciation1" name="oAppreciation" type="radio" />
  <label for="oAppreciation1" class="cEtiquette">Moyen</label>

  <input class="cPerso" id="oAppreciation2" name="oAppreciation" type="radio" />
  <label for="oAppreciation2" class="cEtiquette">Très bien</label>

  <input class="cPerso" id="oAppreciation3" name="oAppreciation" type="radio" />
  <label for="oAppreciation3" class="cEtiquette">Excellent</label>
      
  <label>Vous aimez le :</label>

  <input class="cPerso" id="oLangage0" name="oLangage0" type="checkbox" />
  <label for="oLangage0" class="cEtiquette">JavaScript</label>
      
  <input class="cPerso" id="oLangage1" name="oLangage1" type="checkbox" />
  <label for="oLangage1" class="cEtiquette">CSS3</label>
      
  <input class="cPerso" id="oLangage2" name="oLangage2" type="checkbox" />
  <label for="oLangage2" class="cEtiquette">PHP</label>
      
  <input class="cPerso" id="oLangage3" name="oLangage3" type="checkbox" />
  <label for="oLangage3" class="cEtiquette">ASP</label>

</body>