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>

<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 {
  
}

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

Combinateur de voisin direct : https://developer.mozilla.org/fr/docs/Web/CSS/Combinateur_de_voisin_direct
Pseudo classe :checked : https://developer.mozilla.org/fr/docs/Web/CSS/:checked

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>

<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;
}

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>

<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;
}

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>

<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;
}

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>

<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';
}

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>

<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;
}

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>

<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;
}

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>

<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;
}

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>

<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;
}

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>

<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;
}

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>

<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;
}

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>

<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 ;
}

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

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.

S’abonner

Ce site utilise Akismet pour réduire les indésirables. Découvrez comment les données de vos commentaires sont traitées.

2 Commentaires

Le plus ancien

Le plus récent Le plus populaire

Patrice

5 années il y a

Super article, merci pour l’exemple.
Vous pouvez également cibler les labels sans ajouter de class avec le sélecteur value.
Par exemple :

Oui

Non

et pour le css
input[type= »radio »]:checked + label {
background-color: red;
}
input[type= »radio »][value=yes]:checked + label {
background-color: green;
}

Répondre

Patrick

4 années il y a

Le dernier est super !

Par contre, j’ai du rajouter la ligne suivante dans le css pour que cela fonctionne dans mon cas… (le point blanc restait à droite, j’avais un align= »right » dans mon conteneur)

input[type= »checkbox »].demo5 + label { text-align: initial; }