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 !

Commentaires  
Ayreon
0#Couleurs boutonsAyreon22-05-2020 16:26
Bonjour,
J'ai installé les 2 exemples décrits ci-dessus.
Sur les boutons radios couleur, quelle est la mise en forme à aplliquer SVP ?
par exemple, sur les préréglages du modèle, on a :
0;;blanc
0;;noir
0;;bleu
etc ...
Or, si par exemple j'insère une couleur du type "#ffffff" pour le blanc, ou simplement en écrivant "white", je n'ai aucune couleur qui s'affiche.

Merci de votre aide
Cordialement
Eddy
0#RE: Personnalisation de boutons radio et Cases à cocher à l'aide de CSS3Eddy22-05-2020 18:47
Bonjour et bienvenu.

Toute la mise en forme se passe dans le template avec les CSS.
Les couleurs indiquées aux boutons radio ne sont pas un préréglage mais uniquement leur valeur, si un utilisateur sélectionne une couleur, il faut bien sûr savoir de laquelle il s'agit.
Ayreon
0#merciAyreon23-05-2020 18:20
Merci beaucoup pour votre réponse.
OK, j'ai réussi à le faire fonctionner sur un autre site (le mien en prod) et compris comment cela fonctionne.
Par contre sur celui que je suis en train de monter, pas moyen d'afficher les couleurs des cases.
En prévisualisation simple, la forme est là (les cases aux bonnes dimensions) mais pas les couleurs de fond, ni les labels).
Quant en prévisualisation avec le template du site, les cases sont toujours vides mais minuscules.

Je vais voir du côté des scripts voir si par hasard un plugin ne bloque pas quelque part.
Encore merci :)

Les commentaires sont réservés aux membres enregistrés. Si vous êtes membre, veuillez vous connecter sinon, n'hésitez pas à vous enregistrer !