Il est tout à fait permis et conseiller de styliser vos formulaires et leurs chekcboxs ou leurs boutons radios. J’ai trop longtemps recommencer cette stylisation pour garder sous le coude une fonction SASS qui me permet aujourd’hui de les styliser plus rapidement. Je vous montre ma Mixin checkbox
Cacher la Checkbox ?
En formation, on m’avait appris à cacher la checkbox (balise input) pour construire un label plus stylisé à la place. Mais au fil du temps, j’étais confronté à des bugs ou d’affichage ou pire encore, de validation du bouton radio. Ce n’était pas sans connaître la propriété CSS « apparence« , et sa valeur « none » qui désactive complètement le style par défaut de l’input dont il est question. Ainsi, pas besoin de la cacher en position absolute et avec une opacité à zéro (pour ne citer que cette astuce-là). Dans ce cas-ci, vous gardez l’input à portée de main (et de code). Voilà un exemple sur Codepen :
Mixin checkbox : une fonction sass
Ma mixin checkbox prend 5 paramètres. Dans l’ordre : la taille (hauteur/largeur/pt) de la box et du label. La couleur du texte et de la bordure de la box, la couleur du fond de la box, la couleur du texte et du fond la box si celle-ci est cochée et enfin la taille de la bordure (en px). On pourrait encore la retravailler ; en ajoutant par exemple la taille de la fonte du label si la checkbox est cochée ou le style de la bordure de la box (Dashed, etc.) … En attendant, elle m’est pratique et facile d’utilisation :
@include checkbox (24px, blue, black, pink, grey, 2px);
Remarques
Au niveau de l’HTML, la fonction s’applique au parent de l’input. Et ce dernier est suivi directement de son label. Pour styliser un bouton radio, il faut par contre quelque peu prendre le dessus sur certains éléments. (Ligne 100 à 120). Enfin, si vous êtes confrontés à du code HTML qui ne respecte pas la même structure que la vôtre, vous pouvez vous aider du Javascript pour valider la box en cliquant sur son label. Ce qui n’est pas toujours le cas, et c’est bien dommage. (Là il faut regarder du côté Expérience Utilisateur…)
Pour conclure
On peut parfois rester caler très longtemps sur une méthode alors que bien souvent, à travers le code, d’autre méthodes existent, plus simple et vous devez toujours vous dire que quelqu’un a été confronté aux mêmes problèmes que vous et qu’il a sans doute déjà résolu ces problèmes. Ici, ce sont tout simplement des propriété/valeur du langage qui m’était inconnue.
