Placeholder-Textfarbe in verschiedenen Browser bestimmen (input, textarea)

Mit HTML5 wurde das Input- und Textarea-Attribut placeholder eingeführt. Mit ihm kann man ein solches Feld mit einem vordefinierten Wert vorbelegen, ähnlich wie mit value. Doch wie kann man diesen vordefinierten Text farbmäßig anpassen?

Es gibt drei verschiedene Arten dies zu tun: mit einem pseudo-Element, mit einer pseudo-CSS-Klasse oder garnicht. Jeder Browser macht’s anders:

  • Webkit-Browser (Chrome, Safari, ..) setzen auf das Pseudo-Element ::-webkit-input-placeholder,
  • Mozilla Firefox 3 bis 18 benutzen die Pseudo-Klasse :-moz-placeholder,
  • Ab Version 19 setzt Firefox auf ::-moz-placeholder (also mit einem doppelten Doppelpunkt),
  • Der Internet Explorer (ab Version 10) nutzt :-ms-placeholder

Der Internet Explorer bis Version 9 und auch die neuste Version vom Opera-Browser (momentan Version 12) versteht von all dem garnichts.

CSS-Selektoren – Gruppe

Aufpassen sollte man bei der Umsetzung – man kann nicht einfach eine CSS-Selektoren-Gruppe aus allen Browserverianten basteln um nur einmal seine eigentlichen Farbwerte zu vergeben – denn nach den CSS-Spezifikationen ist eine Gruppe aus Selektoren ungültig, sobald auch nur ein einziger Selektor ungültig ist:

User agents must observe the rules for handling parsing errors:

(..) a group of selectors containing an invalid selector is invalid.

Deswegen brauchen wir für jeden Browser eigene Regeln:

::-webkit-input-placeholder {
    color: #888;
}

:-moz-placeholder {
    color: #888;
}

::-moz-placeholder {
    color: #888;
}

:-ms-input-placeholder {
    color: #888;
}

Weitere Dinge die man beachten sollte:

  • Unbedingt auf gute Kontrast-Werte achten – es gibt viele Leute die mit einem IE < V.10 unterwegs sind und die die Placeholder-Farbe u.U. nicht erkennen können – die eigentliche color eines input-Feldes sollte sich stark von der background-color abheben,
  • Placeholder werden abgeschnitten wenn sie zu groß (zu breit) für das Feld sind – unbedingt gut testen und auch auf verschiedene Schriftarten achten,
  • Manche Browser stellen verschiedene input -Typen (email, search) anders da. Dies sollte man beachten oder direkt verhindern. Am einfachsten ist es die Eigenschaften -webkit-appearance, -moz-appearance und appearance auf textfield zu ändern. Ungefähr so:
    [type="email"], [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

Flattr this!