Personnaliser les boutons radio et checkbox avec CSS

Cet article vous présente le moyen simple de personnaliser vos input de type radio ou checkbox en utilisant CSS.

Le principe de base

Le principe ne consiste pas à personnaliser les éléments input eux-mêmes, mais plutôt de les masquer et de travailler sur les éléments label qui leur sont associés.

Pour associer les éléments label aux éléments input, il s’agit de les positionner juste en dessous dans le code HTML. Puis de les lier en utilisant un attribut id pour les éléments input identique à l’attribut for appliqué sur les éléments label. Chaque input aura son propre id.

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

Il suffit ensuite, en CSS, d’utiliser le +, comme combinateur de voisin direct et la pseudo-classe :checked pour cibler les éléments label à mettre en forme.

Démonstration bouton radio

Voici plusieurs exemples d’application sur des inputs de type radio :

  • Radio 1 : On ajoute juste une bordure au label du bouton radio lorsqu’il est coché.
  • Radio2 : 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.
  • Radio 3 : Le label du bouton radio coché est également masqué.
  • Radio 4 : On utilise des icônes Font Awesome pour remplacer le design des boutons radio.

Utilisez les boutons HTML et CSS pour visualiser le code de la démonstration.

Démonstration checkbox

Voici plusieurs exemples d’application sur des inputs de type checkbox :

  • Checkbox 1 : On ajoute juste une bordure au label lorsque la checkbox est cochée.
  • Checkbox 2 : On ajoute un pseudo élément ::before pour reconstruire la case à cocher.
  • Checkbox 3 : On utilise des icônes Font Awesome pour remplacer le design de la case à cocher.
  • Checkbox 4 : On utilise en complément du pseudo élément ::before, le pseudo élément ::after pour modifier également le texte du label.
  • Checkbox 5 : On transforme la case à cocher en interrupteur ou toggle.

Utilisez les boutons HTML et CSS pour visualiser le code de la démonstration.

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 de messagerie 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.