Personnaliser les checkbox en CSS

Voici une méthode simple sans javascript pour personnaliser vos checkbox.

  • Partir du code suivant : checkbox + label

  • Enlever l’input de type checkbox avec un « display:none ». Pas de panique, l’action de cocher est toujours présente grâce au « for » du label.

  • Créer une nouvelle case à cocher en css :

Ce code va sélectionner le label qui se trouve après une checkbox ( + ) et met un bloc vide (content: «  ») devant le label (pseudo-élément :before)

  • Pour créer le style de la checkbox « checkée », rien de plus simple :

On sélectionne la checkbox « checkée » (:checked) et on remplit le bloc vide devant le label avec une coche (content: « \2713 ») et un fond de couleur différent.

Voici le code complet pour tester :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

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