### [Comment personnaliser les styles du champ à choix multiples](https://wpforms.com/developers/how-to-customize-the-multiple-choice-field-styles/)
**Publié le :** 6 février 2024
**Auteur :** Équipe éditoriale
**Extrait :** Cet article vous montrera comment personnaliser les couleurs du champ à choix multiples à l'aide de CSS.
**Contenu :**
Souhaitez-vous personnaliser la couleur du champ **Choix multiples** ? Par défaut, ce champ utilisera les styles Web standard pour afficher le champ dans votre formulaire. Dans cet article, nous allons vous expliquer la facilité avec laquelle vous pouvez le faire grâce à la puissance de 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](https://wpforms.com/how-to-style-wpforms-using-the-block-editor/ "Comment styliser WPForms à l'aide de l'éditeur de blocs"). 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.
L'utilisation des **Styles de bouton** de l'éditeur de blocs ne modifie pas seulement le bouton **Envoyer** et le champ **Choix multiples**, mais modifie également les couleurs du champ **Case à cocher**.
Dans cet article, nous allons utiliser 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 multiples**.
Si vous avez besoin d'aide pour créer votre formulaire, [vous pouvez facilement consulter ce guide utile](https://wpforms.com/docs/creating-first-form/ "Création de votre premier formulaire").
Une fois que vous avez ajouté le champ **Choix multiples**, cliquez sur l'onglet **Avancé** et, dans **Classes CSS**, ajoutez `special-radio-buttons`. Nous l'utiliserons comme déclencheur pour appeler notre CSS personnalisé.
## Personnalisation du style du champ à choix multiples
Une fois le formulaire enregistré, vous pouvez 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](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Comment ajouter des styles CSS personnalisés pour WPForms").
```
.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 modifiera 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 les styles de l'éditeur de blocs ou le CSS personnalisé, vous pouvez facilement personnaliser les couleurs du champ **Choix multiples**. Saviez-vous que vous pouvez également faire en sorte que les options du champ **Choix multiples** ressemblent à des boutons ? Consultez notre tutoriel sur [Comment personnaliser les champs de cases à cocher et de radio pour qu'ils ressemblent à des boutons](https://wpforms.com/developers/how-to-customize-checkbox-and-radio-fields-to-look-like-buttons/ "Comment personnaliser les champs de cases à cocher et de radio pour qu'ils ressemblent à des boutons").
**Catégories :** Champs
**Tags :** CSS
---