kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Tickets sichern!

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.

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

  1. 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/

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.