Aujourd’hui nous allons voir comment modifier une checkbox pour la rendre plus esthétique via l’ajout d’une icône FontAwesome. Cela peut avoir plusieurs utilités, comme par exemple gérer un menu dit « burger », où notre icône sera une checkbox qui affichera le menu selon son état : ceci sera l’objet d’un prochain article 🙂
Pourquoi ce tutoriel ?
J’ai décidé de faire ce petit article car je me rends compte que cela peut être un sujet bloquant (mes étudiants seront amenés à implémenter ce genre de chose). Il existe bien sûr plusieurs articles sur Internet relatant le sujet, mais je trouve que pour la plupart, ils n’expliquent pas de manière détaillée pour que ce soit accessible aux débutants. Et puis, je préfère qu’un maximum de tutoriels soient accessibles en français! 🙂
Voyons déjà comment procéder pour notre cas présent.
Etape 1 : Ajout des éléments
Nous allons tout d’abord créer notre code HTML, qui va contenir uniquement un checkbox.
[/kc_column_text]
Pour l’instant, rien d’extraordinaire. Nous allons ensuite lui ajouter un label, qui va contenir notre icône FontAwesome.
Le problème ici est double :
- Lorsque nous cliquons sur notre élément FontAwesome,l’icône reste la même
- La checkbox est affiché en plus de l’icône FontAwesome
Etape 2 : Un petit peu de CSS
Nous allons employer ici un autre moyen d’intégrer l’icône pour pouvoir la changer via CSS : nous allons utiliser :before du label. Il nous suffira de dire que nous voulons utiliser la police FontAwesome, et utiliser le code hexadécimal de notre icône, que l’on retrouve sur le site de FontAwesome, sur la même page que notre balise <i>.
Nous allons dans un premier temps intégrer l’icône via le label :before, pour s’assurer qu’il n’y a pas de régression avant d’aller plus loin.
input[type=checkbox] + label:before {
font-family: FontAwesome;
}
input[type=checkbox] + label:before {
content: "\f14a";
}
Et maintenant, en supprimant notre balise <i> dans le label, nous avons le même résultat qu’avant : parfait!
Nous allons nous attaquer maintenant à un notre point : changer l’icône en fonction de l’état de la checkbox. Maintenant que l’on a implémenté l’icône via CSS, cela devient plus simple !
input[type="checkbox"]:not(:checked) + label:before {
content: "\f0c8";
}
input[type="checkbox"]:checked + label:before {
content: "\f14a";
}
Et voilà, le tour est joué!
Etape 3 : Finalisation de la checkbox
La dernière étape est de cacher notre checkbox, et de laisser visible le label. Encore une fois, ça se passe côté CSS, et cela est à nouveau très simple :
input[type=checkbox] {
display: none;
}
Et voilà, c’est fini, notre checkbox est complètement customisé!
Conclusion
Comme vous pouvez le voir, cette implémentation n’est pas compliqué, il suffit juste d’être méthodique et y aller par étape. Une fois qu’on a compris l’astuce du label:before, tout devient plus simple!
Le code de ce tutoriel est disponible sur CodePen.
A la prochaine, et bon développement 🙂
Leave a comment