In diesem Handbuch erklären wir verschiedene Methoden, um die Farbe des Eingabeplatzhalters mit CSS zu ändern.
Methode 1: Ändern Sie die Farbe des Eingabeplatzhalters mit dem Selektor „::placeholder“.
CSS“ ::Platzhalter ” Selektor wird verwendet, um die Formularelemente mit dem Platzhaltertext auszuwählen. Es kann verwendet werden, um den Platzhaltertext zu ändern. Außerdem können Sie diesen Selektor verwenden, um die Farbe des Eingabeplatzhalters zu ändern.
Syntax
Die Syntax des ::Platzhalters lautet wie folgt:
:: Platzhalter {
Farbe : Wert
}
Anstelle von ' Wert “, können Sie die Farbe des Eingabeplatzhalters nach unserer Wahl einstellen.
Kommen wir zum praktischen Beispiel, wo wir die Farbe des Eingabeplatzhalters ändern werden.
Beispiel
Um die Farbe des Eingabeplatzhalters zu ändern, erstellen wir zunächst ein Eingabeelement mit dem -Tag und legen den Eingabetyp als „ Text “. Legen Sie als Nächstes den Text des Eingabeplatzhalters als „ Eintreten Ihren Namen “.
HTML
< Karosserie >< Eingang Typ = 'Text' Platzhalter = 'Gib deinen Namen ein' >
< / Karosserie >
Die Ausgabe des angegebenen Codes ist:
Die Standardfarbe des Eingabeplatzhalters wird im oben angegebenen Bild angezeigt.
Jetzt wechseln wir zum CSS und verwenden „ ::Platzhalter “, um auf den Text des Eingabeplatzhalters zuzugreifen und seine Farbe als „ RGB(17, 0, 255) “.
CSS
:: Platzhalter {Farbe : rgb ( 17 , 0 , 255 ) ;
}
Wie Sie sehen können, ändert sich die Farbe des hinzugefügten Eingabeplatzhalters in Blau:
Es gibt eine andere Methode, um die Farbe des Eingabeplatzhalters zu ändern. Lass es uns überprüfen.
Methode 2: Ändern Sie die Farbe des Eingabeplatzhalters mit dem Pseudoklassenelement „::-webkit-input-placeholder“.
„ :: – Webkit-Eingabeplatzhalter ”-Pseudo-Klassenelement stellt in erster Linie den Platzhaltertext eines Formularelements dar. Es kann von Designdesignern und Entwicklern verwendet werden, um das Aussehen des Platzhaltertextes anzupassen. Darüber hinaus kann der Benutzer durch Verwendung des angegebenen Elements die Farbe eines Eingabeplatzhalters ändern.
Syntax
Die Syntax des ::-webkit-input-placeholder wird wie folgt angegeben:
:: -Webkit-Eingabeplatzhalter {Farbe : Wert
}
Anstelle von ' Wert “, können Sie die Farbe des Eingabeplatzhalters festlegen.
Kommen wir zum Beispiel, um das oben besprochene Pseudoklassenelement zu verstehen.
Beispiel
Verwenden Sie in der CSS-Datei das „ ::-webkit-input-placeholder ” Pseudo-Klassenelement und weisen Sie den Farbwert als “ RGB(255, 13, 13) “:
:::: -Webkit-Eingabeplatzhalter {Farbe : rgb ( 255 , 13 , 13 ) ;
}
Ausgabe
Hier sehen Sie, dass die Standardfarbe des Eingabeplatzhalters geändert wird.
Fazit
Die Farbe des Eingabeplatzhalters wird mit dem „ ::Platzhalter ” Selektor und “ :: – Webkit-Eingabeplatzhalter ” Pseudo-Klassenelement. Damit können Sie die Standardfarbe des Eingabeplatzhalters ändern. In diesem Artikel haben wir das Verfahren zum Ändern der Farbe des Eingabeplatzhalters mithilfe von CSS-Eigenschaften erläutert.