Comment modifier la couleur de l'espace réservé à l'aide de CSS

Un espace réservé d'entrée spécifie l'entrée attendue de l'utilisateur en donnant des conseils ou des descriptions. La plupart des indices et des descriptions disparaissent lorsqu'ils spécifient quelque chose dans le champ de saisie. Par défaut, la couleur de l'espace réservé d'entrée est grise; Cependant, dans certaines conditions, il est important de modifier la couleur de l'espace réservé d'entrée pour augmenter sa visibilité.

Dans ce manuel, nous expliquerons différentes méthodes pour modifier la couleur de l'espace réservé d'entrée à l'aide de CSS.

Méthode 1: Modifier la couleur de l'entrée de l'entrée à l'aide du sélecteur «:: Planholder»

CSS ":: Placeholder»Le sélecteur est utilisé pour sélectionner les éléments de 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 de l'espace réservé :: est la suivante:

:: Placeholder
couleur: valeur

À la place de "valeur», Vous pouvez définir la couleur de l'espace réservé d'entrée en fonction de notre choix.

Passons à l'exemple pratique, où nous changerons la couleur de l'espace réservé d'entrée.

Exemple

Pour modifier la couleur de l'espace d'espaceur d'entrée, premièrement, nous créerons un élément d'entrée à l'aide de la balise et définirons le type d'entrée comme «texte". Ensuite, définissez le texte de l'espace réservé d'entrée comme «Entrer votre nom".

Html

La sortie du code donné est:

La couleur par défaut de l'espace réservé d'entrée est affichée dans l'image donnée ci-dessus.

Maintenant, nous passons au CSS et nous utilisons ":: Placeholder«Pour accéder au texte de l'espace réservé d'entrée et définir sa couleur comme«RVB (17, 0, 255)".

CSS

:: Placeholder
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 modifier la couleur de l'espace réservé d'entrée. Regardons ça.

Méthode 2: Modifier la couleur de l'entrée de l'espace réservé à l'aide de «:: - webkit-int-placeholder» pseudo-classe élément de classe

"::-webkit-int-placeholder»L'élément de pseudo-classe représente principalement le texte de l'espace réservé d'un élément de forme. 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 du :: - Webkit-Input-placeholder est donnée comme suit:

:: - webkit-int-placeholder
couleur: valeur

À la place de "valeur», Vous pouvez définir la couleur de l'espace réservé d'entrée.

Passons à l'exemple pour comprendre l'élément de pseudo-claire parcusculaire ci-dessus.

Exemple

Dans le fichier CSS, utilisez le ":: - webkit-int-placeholder«Élément pseudo-classe et attribuez la valeur de la couleur comme«RVB (255, 13, 13)»:

:::: - webkit-int-placeholder
Couleur: RVB (255, 13, 13);

Sortir

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 «:: Placeholder«Selecteur et«::-webkit-int-placeholder”Élément pseudo-classe. En utilisant 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 de propriétés CSS.