HTML Placeholder Farbe mit CSS stylen

Das placeholder
-Attribut von HTML-Formularfeldern wird eingesetzt, um innerhalb eines Eingabefelds anzuzeigen, was für eine Information der Benutzer eintragen soll. Sobald der Anwender in das Feld geklickt hat und beginnt zu schreiben, verschwindet der placeholder
. In diesem Beitrag findet ihr den CSS-Code um den Placeholder-Text zu stylen.
Workshops & Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug.
Das ::placeholder-Pseudoelement
Um den HTML-Placeholder mit CSS ansprechen und gestalten zu können existiert ein eigener CSS-Selektor. Mit Hilfe des Pseudoelements ::placeholder
kann der Text innerhalb eines Eingabefeldes selektiert und verändert werden. Das folgende Beispiel ändert die Farbe des Placeholders.
::placeholder {
color: red;
}
Browser-Support
Der Browsersupport ist gut – erfordert allerdings einige Vendor-Präfixe.
::-webkit-input-placeholder {
color: red;
}
::-moz-placeholder {
color: red;
}
:-ms-input-placeholder {
color: red;
}
::placeholder {
color: red;
}
Eine detaillierte Übersicht über den Browsersupport findet ihr auf caniuse.com.
Jetzt bist du gefragt!
Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.
Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!
Das könnte dich auch interessieren
1 Kommentar
Kommentar verfassen
Frank Boës
Verfasst am 5. September 2017 um 10:49 Uhr.
Die gestylten Placeholder kann man auch benutzen, um zusammen mit der HTML5-Formular-Validierung einen Hinweis auf Fehler zu geben, oder z.B. obligatorische Felder. Ein kleines Beispiel gibt es unter https://jsfiddle.net/qe8m6v1v/1/