Résumé IA
Souhaitez-vous personnaliser les champs Case à cocher et Radio pour qu'ils ressemblent à des boutons ? En utilisant CSS, vous pouvez facilement modifier l'affichage de ces champs en boutons dont les couleurs correspondent à votre marque spécifique et qui ressortent même de la page lorsque l'utilisateur survole chaque sélection et pour toutes les sélections actives. Dans ce tutoriel, nous allons vous guider étape par étape pour y parvenir.
Par défaut, les champs de formulaire Case à cocher apparaissent avec une case devant l'étiquette à cocher. Les champs de formulaire Radio ont également le même style de formulaire par défaut.
Cependant, avec la magie du CSS, vous pouvez facilement styliser ces champs pour qu'ils ressemblent à des boutons au lieu de simples cases à cocher. Dans ce tutoriel, nous vous fournirons le CSS nécessaire pour effectuer cette modification de style.
Création du formulaire
Pour commencer, nous allons créer un nouveau formulaire et ajouter nos champs. Notre formulaire contiendra un seul champ Case à cocher ainsi qu'un seul champ Choix multiples.
Au fur et à mesure que chacun de ces champs est ajouté, cliquez sur l'onglet Avancé et dans le menu déroulant Disposition des choix, sélectionnez En ligne.
Ajout du CSS
Il est maintenant temps d'ajouter notre magie CSS. Copiez et collez simplement ce CSS sur votre site.
Si vous avez besoin d'aide sur comment et où ajouter du CSS à votre site, veuillez consulter ce tutoriel.
Champs Case à cocher et Choix multiples pour un formulaire spécifique
Tous les champs Case à cocher et Choix multiples pour tous les formulaires
Alternativement, vous pourriez modifier tous vos champs Case à cocher et Choix multiples pour tous les formulaires en utilisant ce CSS.
Et c'est tout ce dont vous avez besoin pour personnaliser les champs Case à cocher et Radio. Souhaitez-vous également personnaliser le champ Nombres ? Jetez un œil à notre tutoriel sur Comment supprimer les flèches sur le champ Nombres.