### [Comment styliser le texte d'espace réservé pour les champs de formulaire](https://wpforms.com/developers/style-placeholder-text-for-form-fields/)
**Publié :** 14 octobre 2019
**Auteur :** Équipe éditoriale
**Extrait :** Cet extrait CSS vous aidera à styliser le texte d'espace réservé pour qu'il corresponde à votre image de marque personnalisée sur votre site.
**Contenu :**
Souhaitez-vous personnaliser l'apparence du texte d'espace réservé dans vos champs de formulaire WPForms ? Avec quelques lignes de CSS personnalisées, vous pouvez facilement y parvenir. Le texte d'espace réservé sert d'information temporaire dans un champ et disparaît lorsqu'un utilisateur interagit avec le champ. Dans l'article suivant, nous vous guiderons tout au long du processus de stylisation du texte d'espace réservé pour vos champs de formulaire.
Gardez à l'esprit que le style par défaut du texte d'espace réservé peut être hérité de différentes sources, y compris votre thème WordPress, les paramètres de WPForms (selon vos paramètres) ou les paramètres du navigateur de l'utilisateur.
Avant de commencer à styliser les espaces réservés, nous devons d'abord créer un formulaire qui utilise ce texte. Une fois votre formulaire créé, vous devrez ajouter votre texte **d'espace réservé** pour chaque champ dans l'onglet **Avancé** des paramètres du champ.
Si vous avez besoin d'aide pour ajouter du texte d'espace réservé, [veuillez consulter cette documentation](https://wpforms.com/docs/how-to-add-placeholder-text-to-a-form-field/ "Comment ajouter du texte d'espace réservé à un champ de formulaire").
## Styliser le texte d'espace réservé
Lors de la stylisation du texte d'espace réservé, il est essentiel d'inclure plusieurs sélecteurs, chacun avec son propre préfixe vendeur. Cela garantit que les styles sont appliqués de manière cohérente sur différents navigateurs et versions. Bien que le CSS puisse sembler répétitif, l'inclusion de tous les sélecteurs est cruciale pour une prise en charge complète des navigateurs.
Pour implémenter ces styles sur votre site, ajoutez simplement le CSS suivant. Si vous ne savez pas où ou comment ajouter du CSS personnalisé, vous pouvez vous référer à notre tutoriel sur le sujet.
Le CSS fourni ci-dessous changera tout le texte d'espace réservé de WPForms en une couleur orange (#e27730) :
```
.wpforms-container ::-webkit-input-placeholder { /* Chrome et Safari */
color: #e27730 !important;
}
.wpforms-container :-moz-placeholder { /* Mozilla Firefox 4 à 18 */
color: #e27730 !important;
opacity: 1 !important;
}
.wpforms-container ::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #e27730 !important;
opacity: 1 !important;
}
.wpforms-container :-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #e27730 !important;
}
.wpforms-container ::-ms-input-placeholder { /* Microsoft Edge */
color: #e27730 !important;
}
.wpforms-container ::placeholder {
color: #e27730 !important;
}
```
Firefox appliquera automatiquement une [opacité](https://www.w3schools.com/cssref/css3_pr_opacity.asp "Propriété CSS opacity") plus faible à tous les espaces réservés des champs de formulaire, les rendant plus transparents que les autres navigateurs.
Ceci est déjà traité dans le CSS ci-dessus en définissant l'opacité pour le CSS spécifique à Firefox sur **opacity: 1;**
Et c'est tout ce dont vous avez besoin pour styliser le texte d'espace réservé. Souhaitez-vous modifier le style du message de confirmation à l'aide de CSS ? Dans notre tutoriel, [Comment supprimer le style de la boîte de message de confirmation](https://wpforms.com/developers/how-to-remove-confirmation-message-box-styling/ "Comment supprimer le style de la boîte de message de confirmation"), nous vous montrerons comment modifier ce style.
## FAQ
#### Q : Puis-je utiliser ce CSS pour styliser un champ déroulant ?
**R :** Si vous souhaitez styliser le champ **Déroulant**, [veuillez plutôt consulter cet article](https://wpforms.com/developers/how-to-style-the-dropdown-field/ "Comment styliser le champ déroulant").
**Catégories :** Stylisme
**Tags :** CSS, Texte d'espace réservé
---