Comment personnaliser les styles des champs à choix multiples

Souhaitez-vous personnaliser la couleur du champ Choix multiple ? Par défaut, ce champ utilisera le style Web standard pour l'afficher dans votre formulaire. Dans cet article, nous allons vous montrer à quel point il est facile de le faire grâce à la puissance du CSS !

Cependant, si vous utilisez l'Éditeur de blocs WPForms, vous pouvez facilement ajuster ces styles sans avoir besoin de CSS personnalisé. Pour en savoir plus à ce sujet, veuillez consulter ce guide utile. Lorsque vous modifiez les Styles de champ et les Styles de bouton, vous pouvez obtenir exactement la même chose dans l'éditeur de blocs que ce que vous pouvez faire avec le CSS personnalisé dans cet article.

Dans cet article, nous allons travailler à travers l'utilisation de la magie du CSS personnalisé pour apporter ces modifications.

Création du formulaire

Pour commencer, vous créerez votre formulaire et ajouterez les champs dont vous avez besoin, y compris au moins un champ Choix multiple.

Si vous avez besoin d'aide pour créer votre formulaire, vous pouvez facilement consulter ce guide utile.

Une fois que vous avez ajouté le champ Choix multiple, cliquez sur l'onglet Avancé et, dans la section Classes CSS, ajoutez special-radio-buttons. Nous l'utiliserons comme déclencheur pour appeler notre CSS personnalisé.

Personnalisation du style du champ Choix multiple

Une fois que vous avez enregistré le formulaire, vous pouvez maintenant ajouter votre CSS. Si vous ne savez pas où ni comment ajouter du CSS personnalisé à votre site, veuillez consulter ce tutoriel pour obtenir de l'aide.

.special-radio-buttons input[type=radio] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: #ffffff !important;
    margin: 0 !important;
    color: #e27730 !important;
    width: 1.15em !important;
    height: 1.15em !important;
    border: 0.15em solid #e27730 !important;
    border-radius: 50% !important;
    transform: translateY(-0.075em) !important;
    display: grid !important;
    place-content: center !important;
}

.special-radio-buttons input[type=radio]:checked:before {
    transform: scale(1) !important;
}

.special-radio-buttons input[type=radio]:before {
    content: "" !important;
    border-radius: 50% !important;
    transform: scale(0) !important;
    transition: 120ms transform ease-in-out !important;
    box-shadow: inset 1em 1em #e27730 !important;
    border: 1px solid #e27730 !important;
}

.special-radio-buttons input[type=radio]:checked:after {
    background-color: #e27730 !important;
}

Ce CSS changera la couleur de la bordure et de la sélection en #e27730, mais ajoutera également une petite animation lors des sélections.

Que vous utilisiez le style de l'éditeur de blocs ou le CSS personnalisé, vous pouvez facilement personnaliser les couleurs du champ Choix multiple. Saviez-vous que vous pouvez également faire en sorte que les options du champ Choix multiple ressemblent à des boutons ? Consultez notre tutoriel sur Comment personnaliser les champs Case à cocher et Radio pour qu'ils ressemblent à des boutons.