### [Comment personnaliser le tableau du champ Échelle de Likert](https://wpforms.com/developers/how-to-customize-the-likert-scale-field-table/)
**Publié le :** 6 décembre 2019
**Auteur :** Équipe éditoriale
**Extrait :** Cet article vous montrera comment utiliser le CSS pour personnaliser le style de l'échelle de Likert dans WPForms.
**Contenu :**
Souhaitez-vous personnaliser le style du champ de formulaire **Échelle de Likert** dans WPForms ? Si vous souhaitez modifier le style de ce champ pour qu'il corresponde aux couleurs de marque de votre site, ce tutoriel vous montrera comment faire. Nous vous donnerons l'exemple CSS de base nécessaire pour personnaliser le champ de formulaire **Échelle de Likert**.
## Création de votre formulaire
Nous commencerons par créer le formulaire et ajouter nos champs, y compris l'**Échelle de Likert**.
Si vous avez besoin d'aide pour créer un formulaire avec le champ **Échelle de Likert**, [veuillez consulter la documentation](https://wpforms.com/docs/how-to-add-a-likert-scale-field-to-wpforms/ "Comment ajouter un champ d'échelle de Likert à WPForms").
## Personnalisation de l'échelle de Likert
Ensuite, vous devrez copier ce CSS sur votre site.
Si vous ne savez pas comment faire, [veuillez consulter ce tutoriel.](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Comment ajouter des styles CSS personnalisés pour WPForms")
```
form#wpforms-form-971 .wpforms-field-likert_scale table.classic thead tr {
background-color: #FFE0B2;
}
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr td input[type=radio]:checked+label:after,
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr td input[type=checkbox]:checked+label:after,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr td input[type=radio]:checked+label:after,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr td input[type=checkbox]:checked+label:after {
background-color: #FF9800;
}
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr td label:hover:after,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr td label:hover:after{
border: 1px solid #EF6C00;
}
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(odd) th,
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(odd) td,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr:nth-child(odd) th,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr:nth-child(odd) td {
background-color: #FFF3E0;
}
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(even) th,
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(even) td,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr:nth-child(even) th,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr:nth-child(even) td {
background-color: #FFE0B2;
}
```
Le style ci-dessus modifiera les couleurs des lignes paires et impaires ainsi que la couleur de l'option lorsqu'elle est cochée. Ce CSS couvre également les styles **Modern** ou **Classic** de l'**Échelle de Likert**.
Vous devrez changer le **-971** car il s'agit de l'ID du formulaire pour notre exemple. Vous devrez mettre à jour ce numéro pour qu'il corresponde à votre propre ID de formulaire.
Si vous avez besoin d'aide pour localiser votre ID de formulaire, [veuillez consulter cette documentation.](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "Comment localiser l'ID du formulaire et l'ID du champ")
Et voilà ! Simplement en utilisant le CSS, vous pouvez personnaliser le style de l'**Échelle de Likert** sur votre formulaire. Souhaitez-vous également personnaliser le style du champ de formulaire **Net Promoter Score** ? Essayez notre tutoriel sur [Comment personnaliser le champ Net Promoter Score](https://wpforms.com/developers/how-to-customize-the-net-promoter-score-field/ "Comment personnaliser le champ Net Promoter Score").
## FAQ
#### Q : Comment supprimer le saut de ligne sur mes options ?
**R :** Par défaut, WPForms ajoute un saut de ligne au texte à l'aide de CSS. Vous pouvez le supprimer en ajoutant du CSS supplémentaire.
N'oubliez pas de changer le **-971** pour qu'il corresponde à votre ID de formulaire.
```
form#wpforms-form-971 .wpforms-field-likert_scale table.classic th,
form#wpforms-form-971 .wpforms-field-likert_scale table.modern th {
word-break: auto-phrase;
}
```
**Catégories :** Style
**Tags :** CSS
---