Personnaliser les boutons radio et checkbox avec CSS

Cet article vous présente le moyen simple de personnaliser vos éléments input de type boutons radio ou cases à cocher (checkbox) en utilisant uniquement du CSS.

Le principe de base

Le principe ne consiste pas à personnaliser l’élément <input> lui-même, mais plutôt à le masquer et à utiliser l’élément <label> qui lui est associé. Le label sert alors d’élément cliquable et est mis en forme avec CSS.

La liaison entre l’élément <input> et son élément <label> s’effectue grâce aux attributs id et for. Pour rappel, chaque id doit être unique dans la page, il en va donc de même pour les for.

L’élément <label> doit être positionné juste en dessous de l’élément <input> dans le code HTML afin de pouvoir le cibler avec le combinateur de voisin direct + sous la forme input[type="radio"] + label ou input[type="radio"].demo + label pour préciser la classe CSS associée.

<input type="radio" name="demo" id="demo">
<label for="demo">Oui</label>

Pour finir, la pseudo-classe :checked permet de distinguer le <label> en fonction de l’état de l’élément <input>.

input[type="radio"] + label {
  
}
input[type="radio"]:checked + label {
  
}

Exemples de boutons radio

Modification de bordure

Dans ce premier exemple, la bordure est modifiée pour le bouton radio qui est activé.

Code HTML :

<input type="radio" name="demo1" class="demo1" id="demo1-a" checked>
<label for="demo1-a">Oui</label>

<input type="radio" name="demo1" class="demo1" id="demo1-b" >
<label for="demo1-b">Non</label>

<input type="radio" name="demo1" class="demo1" id="demo1-c" >
<label for="demo1-c">Pourquoi pas</label>

Code CSS :

input[type="radio"].demo1 {
  display: none;
}
input[type="radio"].demo1 + label {
  padding: 0.3rem 0.5rem;
  border: 1px dashed #ccc;
}
input[type="radio"].demo1:checked + label {
  border: 1px solid #000;
}

Boutons Oui/Non

Dans ce second exemple, les éléments <label> sont présentés avec un effet de survol, façon Bootstrap. Une distinction de couleur est faite entre les boutons radio en ajoutant une classe CSS complémentaire pour chacun.

Code HTML :

<input type="radio" name="demo2" class="demo2 demoyes" id="demo2-a" checked>
<label for="demo2-a">Oui</label>

<input type="radio" name="demo2" class="demo2 demono" id="demo2-b" >
<label for="demo2-b">Non</label>

Code CSS :

input[type="radio"].demo2 {
  display: none;
}
input[type="radio"].demo2 + label {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
  color: #fff;
  background-color: #6c757d;
  border: 1px solid transparent;
  transition: all 0.5s ease-in-out;
}
input[type="radio"].demo2.demoyes:hover + label {
  background-color: #218838;
  border-color: #1e7e34;
}
input[type="radio"].demo2.demoyes:checked + label {
  background-color: #28a745;
  border-color: #28a745;
}
input[type="radio"].demo2.demono:hover + label {
  background-color: #c82333;
  border-color: #bd2130;
}
input[type="radio"].demo2.demono:checked + label {
  background-color: #dc3545;
  border-color: #dc3545;
}

Masquage complet du bouton

Le label du bouton radio coché est également masqué.

Code HTML :

<input type="radio" name="demo3" class="demo3 demoyes" id="demo3-a" checked>
<label for="demo3-a">Oui</label>

<input type="radio" name="demo3" class="demo3 demono" id="demo3-b" >
<label for="demo3-b">Non</label>

Code CSS :

input[type="radio"].demo3 {
  display: none;
}
input[type="radio"].demo3 + label {
  display:none;
  border: 1px solid #000;
  padding: 0.5rem 1rem;
  min-width:50px;
  text-align:center;
}
input[type="radio"].demo3:checked + label {
  display: inline-block;
}

Icônes Font Awesome

Pour cet exemple, nous utilisons des icônes Font Awesome pour remplacer le design des boutons radio.

Code HTML :

<input type="radio" name="demo4" class="demo4 demohappy" id="demo4-a" checked>
<label for="demo4-a">Oui</label>
		
<input type="radio" name="demo4" class="demo4 demosad" id="demo4-b" >
<label for="demo4-b">Non</label>

Code CSS :

input[type="radio"].demo4 {
  display: none;
}
input[type="radio"].demo4 + label::before {
  font-family: "Font Awesome 5 Free";
  font-size: 1.2em;  
  color: #ccc ;
  margin: 0 0.5rem ;
}
input[type="radio"].demo4:checked + label::before {
  color: #000 ;
}
input[type="radio"].demo4.demohappy + label::before {
  content: '\f118';
}
input[type="radio"].demo4.demosad + label::before {
  content: '\f119';
}

Reconstruction du bouton radio (version 1)

Dans cet exemple le bouton radio est reconstruit en CSS en utilisant les pseudo-elements after et before.

Code HTML :

<input type="radio" name="demo5" class="demo5" id="demo5-a" checked>
<label for="demo5-a">Oui</label>
		
<input type="radio" name="demo5" class="demo5" id="demo5-b" >
<label for="demo5-b">Non</label>

Code CSS :

input[type="radio"].demo5 {
  display: none;
}
input[type="radio"].demo5 + label {
  position: relative;
  padding-left: 1.3rem;
}
input[type="radio"].demo5 + label::before,
input[type="radio"].demo5 + label::after {
  display: block;
  position: absolute;
  box-sizing: border-box;
  bottom: 0;
  left: 0;
  content:'';
  width: 1rem;
  height: 1rem; 
  border-radius: 1rem;
}
input[type="radio"].demo5 + label::before {
  border: 1px solid #00B7E8;
  background-color: #eee;
}
input[type="radio"].demo5:checked + label::after {
  background-color: #00B7E8;
}

Reconstruction du bouton radio (version 2)

Voici une deuxième version de reconstruction en CSS du bouton radio.

Code HTML :

<input type="radio" name="demo6" class="demo6" id="demo6-a" checked>
<label for="demo6-a">Oui</label>

<input type="radio" name="demo6" class="demo6" id="demo6-b" >
<label for="demo6-b">Non</label>

Code CSS :

input[type="radio"].demo6 {
  display: none;
}
input[type="radio"].demo6 + label {
  position: relative;
  padding-left: 1.3rem;
}
input[type="radio"].demo6 + label::before,
input[type="radio"].demo6 + label::after {
  display: block;
  position: absolute;
  box-sizing: border-box;
  content:'';
  border-radius: 1rem;
}
input[type="radio"].demo6 + label::before {
  bottom: 0;
  left: 0;
  border: 1px solid #ccc;
  background-color: #eee;
  width: 1rem;
  height: 1rem; 
}
input[type="radio"].demo6 + label::after {
  bottom: 3px;
  left: 3px;
  width: calc(1rem - 6px);
  height: calc(1rem - 6px);
}
input[type="radio"].demo6:checked + label::after {
  background-color: #00B7E8;
}

Exemples de cases à cocher (checkbox)

Bordure sur le label

Dans ce premier exemple, nous modifions juste une bordure appliquée au label de la case à cocher.

Code HTML :

<input type="checkbox" class="demo1" id="demo1">
<label for="demo1">Démo 1</label>

Code CSS :

input[type="checkbox"].demo1 {
  display: none;
}
input[type="checkbox"].demo1 + label {
  border: 1px solid transparent;
}
input[type="checkbox"].demo1:checked + label {
  border: 1px solid #000;
}

Reconstruction de la case

Nous utilisons un pseudo élément before pour reconstruire la case à cocher.

Code HTML :

<input type="checkbox" class="demo2" id="demo2">
<label for="demo2">Démo 2</label>

Code CSS :

input[type="checkbox"].demo2 {
  display: none;
}
input[type="checkbox"].demo2 + label::before {
  content:'';
  border: 1px solid #00B7E8;
  padding: 0 0.6rem;
  margin-right: 0.3rem;
}
input[type="checkbox"].demo2:checked + label::before {
  background-color: #00B7E8;
}

Icônes Font Awesome

Dans cet exemple, les deux états de la case à cocher sont remplacés par des icônes Font Awesome.

Code HTML :

<input type="checkbox" class="demo3" id="demo3">
<label for="demo3">Démo 3</label>

Code CSS :

input[type="checkbox"].demo3 {
  display: none;
}
input[type="checkbox"].demo3 + label::before {
  font-family: "Font Awesome 5 Free";
  content: '\f0c8';
  font-size: 1.2em;  
  color: #00B7E8;
  margin-right: 0.3rem  ;
}
input[type="checkbox"].demo3:checked + label::before {
  content:'\f14a';
  color: #00B7E8;
}

Alternance du texte du label

Nous utilisons en complément du pseudo élément before, le pseudo élément after pour modifier également le texte du label.

Code HTML :

<input type="checkbox" class="demo4" id="demo4">
<label for="demo4"></label>

Code CSS :

input[type="checkbox"].demo4 {
  display: none;
}
input[type="checkbox"].demo4 + label::after { 
  content:'Décochée';
}
input[type="checkbox"].demo4 + label::before {
  content:'';
  border: 1px solid #00B7E8;
  padding: 0 0.6rem;
  margin-right: 0.3rem;
}
input[type="checkbox"].demo4:checked + label::after { 
  content:'Cochée';
}
input[type="checkbox"].demo4:checked + label::before {
  background-color: #00B7E8;
}

Interrupteur ou bouton toggle

Pour cet exemple, nous transformons la case à cocher en interrupteur ou toggle.

Code HTML :

<input type="checkbox" class="demo5" id="demo5">
<label for="demo5"></label>

Code CSS :

input[type="checkbox"].demo5 {
  display: none;
}
input[type="checkbox"].demo5 + label {
  box-sizing: border-box;
  display: inline-block;
  width: 3rem;
  height: 1.5rem;
  border-radius: 1.5rem;
  padding:2px;
  background-color: #c0ceda ;
  transition: all 0.5s ;
}
input[type="checkbox"].demo5 + label::before {
  box-sizing: border-box;
  display: block;
  content: "";
  height: calc(1.5rem - 4px);
  width: calc(1.5rem - 4px);
  border-radius: 50%;
  background-color: #fff;
  transition: all 0.5s ;
}
input[type="checkbox"].demo5:checked + label {
  background-color: #00B7E8 ;
}
input[type="checkbox"].demo5:checked + label::before {
  margin-left: 1.5rem ;
}

Sauf mention contraire*, l'article Personnaliser les boutons radio et checkbox avec CSS et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.