Appliquer du style CSS aux checkbox et boutons radio à l'aide de la balise LABEL

Les cases à cocher et boutons radio

Si vous avez déjà essayé de styler les cases à cocher (checkbox) et les boutons radio, alors vous vous êtes sûrement rendu compte que tous vos styles passent inaperçus et ces éléments, tellement minuscules, gardent leur rendu basique et peu satisfaisant. De toute façon c'est le cas sur la plupart des navigateur modernes.

Cependant, les checkbox et les boutons radio sont toujours (ou presque) présents dans un formulaire qui se respecte, car ils sont très érgonomiques si l'on veut exprimer un choix unique ou même des choix multiples. Or, leur style par défaut médiocre pose un grand problème aux créateurs de sites Web.

La balise LABEL

La balise LABEL est un élément actif dans une page Web, c'est à dire que si elle est associée à un champ de formulaire, le fait de cliquer dessus équivaut au fait de cliquer sur le champs associé.

La balise LABEL peut être vue comme un container de type inline. On peut donc y mettre du texte si l'on veut. Cependant, dans notre astuce nous allons plutôt la laisser vide, la transoformer en élément de type block pour pouvoir la redimensionner et la styler comme on le souhaite de telle sorte à ce qu'elle soit semblable à un checkbox ou un bouton radio qui a de l'allure. Bien entendu, le champs de formulaire qui lui est associé sera ensuite masqué.

Passons à la pratique