Dans ce manuel, nous expliquerons différentes méthodes pour changer la couleur de l'espace réservé d'entrée à l'aide de CSS.
Méthode 1 : Modifier la couleur de l'espace réservé d'entrée à l'aide du sélecteur « ::placeholder »
CSS ' :: espace réservé ” sélecteur est utilisé pour sélectionner les éléments du formulaire avec le texte de l'espace réservé. Il peut être utilisé pour modifier le texte de l'espace réservé. De plus, vous pouvez utiliser ce sélecteur pour modifier la couleur de l'espace réservé d'entrée.
Syntaxe
La syntaxe du ::placeholder est la suivante :
:: espace réservé {
Couleur : évaluer
}
À la place de ' évaluer ”, vous pouvez définir la couleur de l'espace réservé d'entrée selon notre choix.
Passons à l'exemple pratique, où nous allons changer la couleur de l'espace réservé d'entrée.
Exemple
Pour changer la couleur de l'espace réservé d'entrée, nous allons d'abord créer un élément d'entrée à l'aide de la balise et définir le type d'entrée sur ' texte ”. Ensuite, définissez le texte de l'espace réservé d'entrée comme ' Entrer votre nom ”.
HTML
< corps >< saisir taper = 'texte' espace réservé = 'Entrez votre nom' >
< / corps >
La sortie du code donné est :
La couleur par défaut de l'espace réservé d'entrée est indiquée dans l'image ci-dessus.
Maintenant, nous passons au CSS et utilisons ' :: espace réservé ' pour accéder au texte de l'espace réservé d'entrée et définir sa couleur sur ' RVB(17, 0, 255) ”.
CSS
:: espace réservé {Couleur : RVB ( 17 , 0 , 255 ) ;
}
Comme vous pouvez le voir, la couleur de l'espace réservé d'entrée ajouté est changée en bleu :
Il existe une autre méthode pour changer la couleur de l'espace réservé d'entrée. Regardons ça.
Méthode 2: modifier la couleur de l'espace réservé d'entrée à l'aide de l'élément de pseudo-classe '::-webkit-input-placeholder'
' :: – espace réservé d'entrée webkit ” L'élément de pseudo-classe représente principalement le texte d'espace réservé d'un élément de formulaire. Il peut être utilisé par les concepteurs de thèmes et les développeurs pour personnaliser l'apparence du texte de l'espace réservé. De plus, en utilisant l'élément spécifié, l'utilisateur peut modifier la couleur d'un espace réservé d'entrée.
Syntaxe
La syntaxe de ::-webkit-input-placeholder est donnée comme suit :
:: -webkit-input-placeholder {Couleur : évaluer
}
À la place de ' évaluer ”, vous pouvez définir la couleur de l'espace réservé d'entrée.
Passons à l'exemple pour comprendre l'élément de pseudo-classe discuté ci-dessus.
Exemple
Dans le fichier CSS, utilisez le ' ::-webkit-input-placeholder ” élément de pseudo-classe et attribuez la valeur de couleur comme “ RVB(255, 13, 13) ” :
:::: -webkit-input-placeholder {Couleur : RVB ( 255 , 13 , 13 ) ;
}
Production
Ici, vous pouvez voir que la couleur par défaut de l'espace réservé d'entrée est modifiée.
Conclusion
La couleur de l'espace réservé d'entrée est modifiée en utilisant le ' :: espace réservé » sélecteur et « :: – espace réservé d'entrée webkit ” élément de pseudo-classe. Grâce à cela, vous pouvez modifier la couleur par défaut de l'espace réservé d'entrée. Dans cet article, nous avons expliqué la procédure liée à la modification de la couleur de l'espace réservé d'entrée à l'aide des propriétés CSS.