HTML Placeholder-Text 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.

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.

::placeholder {
  color: red;
}

Beispiel anschauen

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.