Personnalisation de boutons radio et Cases à cocher à l'aide de CSS3

Je trouve mes boutons radio et cases à cocher trop ordinaires… Serait-il possible de leur donner une autre "gueule".

Niveau: Avancé
Prérequis: html, css, utilisation de l'inspecteur du navigateur
Version BF minimale requise: BreezingForms Lite

En fait, ce n'est pas BreezingForms qui permet la personnalisation des champs mais CSSdepuis le fichier theme.css du template utilisé pour l'affichage de votre formulaire.

Les champs de type Checkbox et bouton Radio

Les champs de type Cases à cocher et bouton radio sont souvent assez difficile à personnaliser mais pas impossible grâce à leur Label et CSS3

Le label d'un champ de formulaire permet de donner un intitulé à ce champ.
Son utilisation permet également aux navigateurs de l'associer à son champ de formulaire de manière que, d'un clic sur ce label donnera le focus à son champs de formulaire.
C'est entre-autre pratique par exemple pour les boutons radio ou cases à cocher parfois trop petites pour certains internautes.

En plus de la faculté de donner le focus à son champ, le label permet d'activer et/ou désactiver le bouton ou la case correspondant et nous pouvons en profiter pour donner une toute autre gueule à ces boutons et cases.

On peut se servir uniquement du label et grâce à CSS3 et ses pseudo-éléments :before et :after pour mettre en forme nos éléments de type cases à cocher et/ou bouton radio.

Pour cet article, j'ai préparé deux courts formulaires, l'un présentant un groupe de 9 boutons radio à l'aide desquels on peut choisir une couleur par clic sur l'aire représentée par le label de ces boutons.

Pour le second formulaire, j'ai placé deux groupes de cases à cocher, l'une en ligne et l'autre en colonne leur donnant une allure de bouton Switch.

Sous ces derniers se trouvent deux groupes de boutons radio, l'un de trois options, l'autre de deux options. Ils ont été formatés pour ressembler à un unique bouton proposant deux options ou plus…

Les exemples

Ci-dessous, le premier formulaire de choix de couleur. Il pourrait servir pour divers types de formulaire, devis, etc. où une couleur doit être sélectionnée pour un éventuel produit. Il présente 9 options (possible d'en utiliser plus ou moins) dont une seule est possible comme pour tout groupe de boutons radio.

Je vous laisse tester ce petit formulaire et ses options de choix de couleurs.

Dans le formulaire ci-dessus, les boutons radio sont complètement masqués par une position absolute avec une valeur de position gauche négative afin de les sortir du champ, seuls ne sont affichés que les intitulés (labels), dans le cas présent, vides de texte.
Comme on peut le voir cela n'entrave en rien leur fonctionnement et on peut parfaitement sélectionner une couleur en cliquant sur son label. Le pseudo-élément :after mettant en forme le label sous forme de zone rectangulaire avec un content: "couleurX"; placé en bas de la zone occupée par ce label.

Un clic met en œuvre le pseudo-élément :before et ajoute une zone noire contenant une confirmation de sélection.

Seules votre imagination et votre créativité seront les limites de votre mise en forme.


Dans le formulaire suivant, les boutons switch sont en réalité de type checkbox (cases à cocher) et les sélecteurs sont de type radio.

Testez les différentes options afin de voir leur fonctionnement.

Groupe de cases à cocher

Ci-dessous, nous avons deux groupes de trois cases à cocher avec un formatage CSS3 afin de leur donner l'illusion de boutons Switch.




Bouton radio

Ci-dessous, nous avons deux groupe de boutons radio avec un formatage CSS3 afin de leur donner l'illusion d'un sélecteur d'option. Dans le cas présent, un groupe de 3 boutons (Oui, Peut-être, Non) et un groupe de 2 boutons (Oui, Non)…


Conclusion

Nous voyons qu'avec un peu à moyennement de CSS3, ses "pseudo-element" et grâce aux Labels, nous arrivons à personnaliser des éléments habituellement quasiment inaccessibles en modification.

Annexe

Les méthodes mises en place pour ces deux formulaires ne sont pas détaillées ici toutefois, je propose les deux formulaires en téléchargement ainsi que les deux templates (sur base du template "Default") ou seuls les éléments ciblés dans cet article sont formatés.

Ces matériels ne sont pas prévus pour être utiliser en production, ils ne sont que des exemples qui pourront vous servir à étudier le type de mise en place via les CSS.

Les templates sont à placer dans le répertoire media/breezingforms/themes

Les formulaires s'installent par l'ajout du package (fichier .xml) selon ce tutoriel.

Pour le choix des couleurs, il faut modifier les ID des éléments ciblés par les vôtres. Relevez l'ID des éléments de votre formulaire et remplacez ceux présents dans le fichier theme.css.

Il me reste à vous souhaiter une bonne créativité et des jolies personnalisations. Pour l'exemple, je suis resté très simpliste mais il est possible de faire de jolies choses et se démarquer des formulaires d'autres sites.

Télécharger les formulaires et les templates

Quelques exemples, sur Codepen, de checkbox transformées uniquement à l'aide de CSS et dont vous pouvez vous inspirer.

Cet article vous a plu ?
N'hésitez pas à laisser une évaluation en haut de page afin de me faire part de votre impression !

 Ajouter un commentaire
En utilisant ce formulaire de commentaires, vous acceptez que les informations demandées soient enregistrées, affichées ci-dessous et utilisées pour un éventuel contact (dans ce cas, n'oubliez pas de renseigner votre e-mail). L'adresse e-mail n'est jamais affichée aux visiteurs.