Julien Crego
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.
HTML
<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>.
CSS
input[type="radio"] + label { }input[type="radio"]:checked + label { }En savoir plus
- 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 cases à cocher (checkbox)
Bordure sur le label
Dans ce premier exemple, nous modifions juste une bordure appliquée au label de la case à cocher.
HTML
<div class="demo-checkbox-radio"> <input type="checkbox" class="demo-checkbox-1" id="demo-checkbox-1-1"> <label for="demo-checkbox-1-1">Option 1</label> <input type="checkbox" class="demo-checkbox-1" id="demo-checkbox-1-2"> <label for="demo-checkbox-1-2">Option 2</label> </div>
CSS
input[type="checkbox"].demo-checkbox-1 { display: none;}input[type="checkbox"].demo-checkbox-1 + label { border: 1px dashed #ccc; padding: 0.3rem 0.5rem;}input[type="checkbox"].demo-checkbox-1:checked + label { border: 1px solid #000;}Reconstruction de la case
Nous utilisons un pseudo élément before pour reconstruire la case à cocher.
HTML
<div class="demo-checkbox-radio"> <input type="checkbox" class="demo-checkbox-2" id="demo-checkbox-2-1"> <label for="demo-checkbox-2-1">Option 1</label> <input type="checkbox" class="demo-checkbox-2" id="demo-checkbox-2-2"> <label for="demo-checkbox-2-2">Option 2</label> </div>
CSS
input[type="checkbox"].demo-checkbox-2 { display: none;}input[type="checkbox"].demo-checkbox-2 + label::before { content:''; display: inline-block; width: 0.8rem; height: 0.8rem; border: 1px solid #bbb; margin-right: 0.3rem;}/* Positionnement des checkboxes entre-elles */input[type="checkbox"].demo-checkbox-2 + label { margin-right: 1.5rem;}/* Checkbox cochée */input[type="checkbox"].demo-checkbox-2:checked + label::before { background-color: #00B7E8; border-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.
HTML
<script src="https://kit.fontawesome.com/22685f0069.js" crossorigin="anonymous"></script><div class="demo-checkbox-radio"> <input type="checkbox" class="demo-checkbox-3" id="demo-checkbox-3-1"> <label for="demo-checkbox-3-1">Option 1</label> <input type="checkbox" class="demo-checkbox-3" id="demo-checkbox-3-2"> <label for="demo-checkbox-3-2">Option 2</label> <br><br> <input type="checkbox" class="demo-checkbox-3-v2" id="demo-checkbox-3-3"> <label for="demo-checkbox-3-3">Option 1</label> <input type="checkbox" class="demo-checkbox-3-v2" id="demo-checkbox-3-4"> <label for="demo-checkbox-3-4">Option 2</label> </div>
CSS
/* Version 1 */input[type="checkbox"].demo-checkbox-3 { display: none;}input[type="checkbox"].demo-checkbox-3 + label::before { font-family: "Font Awesome 5 Free"; content: '\f0c8'; font-size: 1.2em; color: #00B7E8; margin-right: 0.3rem ;}input[type="checkbox"].demo-checkbox-3:checked + label::before { content:'\f14a'; color: #00B7E8;}/* Version 2 */input[type="checkbox"].demo-checkbox-3-v2 { display: none;}input[type="checkbox"].demo-checkbox-3-v2 + label::before { font-family: "Font Awesome 5 Free"; content: '\f119'; font-size: 1.2em; color: #00B7E8; margin-right: 0.3rem ;}input[type="checkbox"].demo-checkbox-3-v2:checked + label::before { content:'\f118'; color: #00B7E8;}/* Positionnement des checkboxes entre-elles */input[type="checkbox"].demo-checkbox-3 + label,input[type="checkbox"].demo-checkbox-3-v2 + label { margin-right: 1.5rem;}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.
HTML
<div class="demo-checkbox-radio"> <input type="checkbox" class="demo-checkbox-4" id="demo-checkbox-4-1"> <label for="demo-checkbox-4-1"></label></div>
CSS
input[type="checkbox"].demo-checkbox-4 { display: none;}/* Checkbox decochée */input[type="checkbox"].demo-checkbox-4 + label::after { content:'Décochée';}input[type="checkbox"].demo-checkbox-4 + label::before { content:''; display: inline-block; width: 0.9rem; height: 0.9rem; border: 1px solid #00B7E8; margin-right: 0.3rem;}/* Checkbox cochée */input[type="checkbox"].demo-checkbox-4:checked + label::after { content:'Cochée';}input[type="checkbox"].demo-checkbox-4:checked + label::before { background-color: #00B7E8;}Interrupteur ou bouton toggle
Pour cet exemple, nous transformons la case à cocher en interrupteur ou toggle.
HTML
<div class="demo-checkbox-radio"> <input type="checkbox" class="demo-checkbox-5" id="demo-checkbox-5-1"> <label for="demo-checkbox-5-1"> <span class="switch"></span> Activer l'option </label></div>
CSS
input[type="checkbox"].demo-checkbox-5 { position: absolute; opacity: 0;}input[type="checkbox"].demo-checkbox-5 + label { display: inline-flex; align-items: center; flex-direction: row-reverse; gap: 0.75rem; cursor: pointer;}/* Interrupteur Off */input[type="checkbox"].demo-checkbox-5 + label .switch { box-sizing: border-box; display: inline-block; width: 3rem; height: 1.5rem; border-radius: 1.5rem; padding: 2px; background-color: #c0ceda; transition: background-color 0.5s;}input[type="checkbox"].demo-checkbox-5 + label .switch::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: margin-left 0.5s;}/* Interrupteur On */input[type="checkbox"].demo-checkbox-5:checked + label .switch { background-color: #00b7e8;}input[type="checkbox"].demo-checkbox-5:checked + label .switch::before { margin-left: 1.5rem;}/* Etat focus clavier, activable par espace */input[type="checkbox"].demo-checkbox-5:focus-visible + label .switch { outline: 2px solid #007ca3; outline-offset: 3px;}Interrupteur ou bouton toggle avec texte
Pour cet exemple, nous transformons la case à cocher en interrupteur ou toggle avec du texte pour chaque état.
HTML
<div class="demo-checkbox-radio"> <input type="checkbox" class="demo-checkbox-6" id="demo-checkbox-6-1"> <label for="demo-checkbox-6-1"> <span class="switch"></span> Activer l'option </label></div>
CSS
input[type="checkbox"].demo-checkbox-6 { position: absolute; opacity: 0; width: 1px; height: 1px;}input[type="checkbox"].demo-checkbox-6 + label { display: inline-flex; align-items: center; flex-direction: row-reverse; gap: 0.75rem; cursor: pointer;}/* Interrupteur Off */input[type="checkbox"].demo-checkbox-6 + label .switch { box-sizing: border-box; position: relative; display: inline-block; width: 5.5rem; height: 2rem; border-radius: 2rem; background-color: #d94b4b; transition: background-color 0.3s;}input[type="checkbox"].demo-checkbox-6 + label .switch::after { content: "NON"; position: absolute; top: 50%; left: 0.8rem; transform: translateY(-50%); color: white; font-size: 0.75rem; font-weight: bold;}input[type="checkbox"].demo-checkbox-6 + label .switch::before { content: ""; position: absolute; top: 0.25rem; left: 3.75rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background-color: white; transition: left 0.3s;}/* Interrupteur On */input[type="checkbox"].demo-checkbox-6:checked + label .switch { background-color: #269b62;}input[type="checkbox"].demo-checkbox-6:checked + label .switch::before { left: 0.25rem;}input[type="checkbox"].demo-checkbox-6:checked + label .switch::after { content: "OUI"; left: auto; right: 0.8rem;}/* Etat focus clavier, activable par espace */input[type="checkbox"].demo-checkbox-6:focus-visible + label .switch { outline: 2px solid #007ca3; outline-offset: 3px;}Groupe de cases
Exemple de groupe de plusieurs cases à cocher.
HTML
<div class="demo-checkbox-radio"> <div class="demo-checkbox-group-7"> <input type="checkbox" class="demo-checkbox-7" id="demo-checkbox-7-1"> <label for="demo-checkbox-7-1">Option 1</label> <input type="checkbox" class="demo-checkbox-7" id="demo-checkbox-7-2"> <label for="demo-checkbox-7-2">Option 2</label> <input type="checkbox" class="demo-checkbox-7" id="demo-checkbox-7-3"> <label for="demo-checkbox-7-3">Option 3</label> </div></div>
CSS
.demo-checkbox-group-7 { display: flex;}input[type="checkbox"].demo-checkbox-7 { display: none;}input[type="checkbox"].demo-checkbox-7 + label { border: 1px solid #ccc; border-width: 1px 1px 1px 0; padding: 0.3rem 0.8rem;}input[type="checkbox"].demo-checkbox-7 + label:first-of-type { border-width: 1px; border-radius: 5px 0 0 5px;}input[type="checkbox"].demo-checkbox-7 + label:last-of-type { border-radius: 0 5px 5px 0;}input[type="checkbox"].demo-checkbox-7:checked + label { background-color: #0088A3; color: #fff;}Exemples de boutons radio
Modification de bordure
Dans ce premier exemple, la bordure est modifiée pour le bouton radio qui est activé.
HTML
<div class="demo-checkbox-radio"> <input type="radio" name="demo1" class="demo-radio-8" id="demo-radio-8-a" checked> <label for="demo-radio-8-a">Oui</label> <input type="radio" name="demo1" class="demo-radio-8" id="demo-radio-8-b" > <label for="demo-radio-8-b">Non</label> <input type="radio" name="demo1" class="demo-radio-8" id="demo-radio-8-c" > <label for="demo-radio-8-c">Pourquoi pas</label></div>
CSS
input[type="radio"].demo-radio-8 { display: none;}input[type="radio"].demo-radio-8 + label { padding: 0.3rem 0.5rem; border: 1px dashed #ccc;}input[type="radio"].demo-radio-8: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.
HTML
<div class="demo-checkbox-radio"> <input type="radio" name="demo-9" class="demo-radio-9 demo-radio-9-yes" id="demo-radio-9-a" checked> <label for="demo-radio-9-a">Oui</label> <input type="radio" name="demo-9" class="demo-radio-9 demo-radio-9-no" id="demo-radio-9-b" > <label for="demo-radio-9-b">Non</label></div>
CSS
input[type="radio"].demo-radio-9 { display: none;}input[type="radio"].demo-radio-9 + 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;}/* Bouton Oui */input[type="radio"].demo-radio-9.demo-radio-9-yes:hover + label { background-color: #218838; border-color: #1e7e34;}input[type="radio"].demo-radio-9.demo-radio-9-yes:checked + label { background-color: #28a745; border-color: #28a745;}/* Bouton Non */input[type="radio"].demo-radio-9.demo-radio-9-no:hover + label { background-color: #c82333; border-color: #bd2130;}input[type="radio"].demo-radio-9.demo-radio-9-no:checked + label { background-color: #dc3545; border-color: #dc3545;}Masquage complet du bouton
Le label du bouton radio coché est également masqué.
HTML
<div class="demo-checkbox-radio"> <input type="radio" name="demo-10" class="demo-radio-10 demo-radio-10-yes" id="demo-radio-10-a" checked> <label for="demo-radio-10-a">Oui</label> <input type="radio" name="demo-10" class="demo-radio-10 demo-radio-10-no" id="demo-radio-10-b" > <label for="demo-radio-10-b">Non</label></div>
CSS
input[type="radio"].demo-radio-10 { display: none;}input[type="radio"].demo-radio-10 + label { display: inline-block; border: 1px solid #000; color: #fff; padding: 0.5rem 1rem; min-width:50px; text-align:center;}input[type="radio"].demo-radio-10:checked + label { display: none;}input[type="radio"].demo-radio-10-yes + label { background-color: #28a745; border-color: #28a745;}input[type="radio"].demo-radio-10-no + label { background-color: #c82333; border-color: #bd2130;}Icônes Font Awesome
Pour cet exemple, nous utilisons des icônes Font Awesome pour remplacer le design des boutons radio.
HTML
<script src="https://kit.fontawesome.com/22685f0069.js" crossorigin="anonymous"></script><div class="demo-checkbox-radio"> <input type="radio" name="demo-11" class="demo-radio-11 demo-radio-11-happy" id="demo-radio-11-a" checked> <label for="demo-radio-11-a">Oui</label> <input type="radio" name="demo-11" class="demo-radio-11 demo-radio-11-sad" id="demo-radio-11-b" > <label for="demo-radio-11-b">Non</label></div>
CSS
input[type="radio"].demo-radio-11 { display: none;}input[type="radio"].demo-radio-11 + label::before { font-family: "Font Awesome 5 Free"; font-size: 1.2em; color: #ccc ; margin: 0 0.5rem ;}input[type="radio"].demo-radio-11:checked + label::before { color: #000 ;}input[type="radio"].demo-radio-11.demo-radio-11-happy + label::before { content: '\f118';}input[type="radio"].demo-radio-11.demo-radio-11-sad + 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.
HTML
<div class="demo-checkbox-radio"> <input type="radio" name="demo-12" class="demo-radio-12" id="demo-radio-12-a" checked> <label for="demo-radio-12-a">Oui</label> <input type="radio" name="demo-12" class="demo-radio-12" id="demo-radio-12-b" > <label for="demo-radio-12-b">Non</label></div>
CSS
input[type="radio"].demo-radio-12 { display: none;}input[type="radio"].demo-radio-12 + label { position: relative; padding-left: 1.3rem;}input[type="radio"].demo-radio-12 + label::before,input[type="radio"].demo-radio-12 + label::after { display: block; position: absolute; box-sizing: border-box; bottom: 3px; left: 0; content:''; width: 1em; height: 1em; border-radius: 1em;}input[type="radio"].demo-radio-12 + label::before { border: 1px solid #00B7E8; background-color: #eee; }input[type="radio"].demo-radio-12:checked + label::after { background-color: #00B7E8;}Reconstruction du bouton radio (version 2)
Voici une deuxième version de reconstruction en CSS du bouton radio.
HTML
<div class="demo-checkbox-radio"> <input type="radio" name="demo-13" class="demo-radio-13" id="demo-radio-13-a" checked> <label for="demo-radio-13-a">Oui</label> <input type="radio" name="demo-13" class="demo-radio-13" id="demo-radio-13-b" > <label for="demo-radio-13-b">Non</label></div>
CSS
input[type="radio"].demo-radio-13 { display: none;}input[type="radio"].demo-radio-13 + label { position: relative; padding-left: 1.3rem;}input[type="radio"].demo-radio-13 + label::before,input[type="radio"].demo-radio-13 + label::after { display: block; position: absolute; box-sizing: border-box; content:''; border-radius: 1rem;}input[type="radio"].demo-radio-13 + label::before { bottom: 3px; left: 0; border: 1px solid #ccc; background-color: #eee; width: 1rem; height: 1rem; }input[type="radio"].demo-radio-13 + label::after { bottom: 6px; left: 3px; width: calc(1rem - 6px); height: calc(1rem - 6px);}input[type="radio"].demo-radio-13:checked + label::after { background-color: #00B7E8;}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.
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;
}
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; }