So ändern Sie die Input -Platzhalterfarbe mit CSS

Ein Eingabe -Platzhalter gibt die erwarteten Eingaben des Benutzer an, indem Hinweise oder Beschreibungen angegeben werden. Die meisten Hinweise und Beschreibungen verschwinden, wenn sie im Eingabebuch etwas angeben. Standardmäßig ist die Farbe des Eingangsplatzhalters grau; Unter einigen Bedingungen ist es jedoch wichtig, die Farbe des Eingabebelgerechte zu ändern, um seine Sichtbarkeit zu erhöhen.

In diesem Handbuch erläutern wir verschiedene Methoden, um die Farbe des Eingabergerechte mit CSS zu ändern.

Methode 1: Eingabeinpassungsfarbe mit ":: Placeholder" -Selector ändern

CSS “:: PlatzhalterDer Selektor wird verwendet, um die Formularelemente mit dem Platzhaltertext auszuwählen. Es kann verwendet werden, um den Platzhaltertext zu ändern. Darüber hinaus können Sie diesen Selektor verwenden, um die Farbe des Eingaberplatzhalters zu ändern.

Syntax

Die Syntax des :: Platzhalters lautet wie folgt:

:: Platzhalter
Farbe: Wert

Anstelle von "Wert”, Sie können die Farbe des Eingaberplatzhalters nach unserer Wahl festlegen.

Wechseln wir zu dem praktischen Beispiel, in dem wir die Farbe des Eingabeberechtshalters ändern werden.

Beispiel

Um die Eingabe -Platzhalterfarbe zu ändern, erstellen wir zunächst ein Eingangselement mit dem Tag und setzen Sie den Eingangstyp als “als“ festText”. Setzen Sie als nächstes den Text des Eingabeberechtshalters als "Eingeben Ihren Namen”.

Html

Die Ausgabe des angegebenen Code ist:

Die Standardfarbe des Eingaberplatzhalters wird im obigen gegebenen Bild angezeigt.

Jetzt bewegen wir uns zum CSS und verwenden “:: Platzhalter”, Um auf den Text des Eingabersteller zuzugreifen und seine Farbe als" festlegen "festzulegen"RGB (17, 0, 255)”.

CSS

:: Platzhalter
Farbe: RGB (17, 0, 255);

Wie Sie sehen können, wird die Farbe des hinzugefügten Eingaberplatzhalters in Blau geändert:

Es gibt eine andere Methode, um die Farbe des Eingaberplatzhalters zu ändern. Schauen wir es uns an.

Methode 2: Pseudoklasse-Element „Webkit-Input-Placeholder“ ändern

“::-Webkit-Input-PlatzhalterDas Pseudoklasse-Element repräsentiert in erster Linie den Platzhaltertext eines Formularelements. Es kann von Themendesigner und Entwicklern verwendet werden, um das Aussehen des Platzhaltertextes anzupassen. Darüber hinaus kann der Benutzer durch die Verwendung des angegebenen Elements die Farbe eines Eingabeberechungshalters ändern.

Syntax

Syntax des ::-Webkit-Input-Platzhalters wird als:

::-Webkit-Input-Placeholder
Farbe: Wert

Anstelle von "Wert”, Sie können die Farbe des Eingaberplatzhalters festlegen.

Gehen wir zum Beispiel, um das oben diskutierte Pseudoklasse-Element zu verstehen.

Beispiel

Verwenden Sie in der CSS -Datei die “::-Webkit-Input-Platzhalter”Element der Pseudoklasse und weisen Sie den Wert der Farbe als„ zu “zu"RGB (255, 13, 13)”:

:::::-Webkit-Input-Placeholder
Farbe: RGB (255, 13, 13);

Ausgang

Hier können Sie sehen.

Abschluss

Die Farbe des Eingaberplatzhalters wird durch die Verwendung der “geändert:: Platzhalter”Selektor und“::-Webkit-Input-Platzhalter”Pseudo-Klasse-Element. Mit dieser Weise können Sie die Standardfarbe des Eingaberplatzhalters ändern. In diesem Artikel haben wir das Verfahren im Zusammenhang mit der Änderung der Farbe des Eingabergerichtshalters mithilfe von CSS -Eigenschaften erläutert.