Comment styliser le texte d'espace réservé pour les champs de formulaire

Souhaitez-vous personnaliser l'apparence du texte d'espace réservé dans les champs de votre formulaire WPForms ? Avec quelques lignes de CSS personnalisé, vous pouvez facilement y parvenir. Le texte d'espace réservé sert d'information temporaire dans un champ et disparaît lorsque l'utilisateur interagit avec le champ. Dans l'article suivant, nous vous guiderons dans le processus de style 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 réglages) 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 à partir de l'onglet Avancé des paramètres du champ.

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 la couleur de tous les textes d'espace réservé WPForms en orange (#e27730) :

.wpforms-container ::-webkit-input-placeholder { /* Chrome and Safari */
   color: #e27730 !important;
}
 
.wpforms-container :-moz-placeholder { /* Mozilla Firefox 4 to 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é plus faible à tous les espaces réservés des champs de formulaire, les rendant plus transparents que les autres navigateurs.

Ceci est déjà pris en compte 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, 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 consulter cet article à la place.