Wie ändert man die Farbe von Platzhaltern mit CSS?

Leon A. -

Problem: Anpassung der Platzhaltertext-Farbe

Platzhaltertext in Formularfeldern erscheint oft standardmäßig in einem hellen Grauton. Dies passt nicht immer zum Design einer Website. Die Änderung dieser Farbe kann die visuelle Konsistenz und Barrierefreiheit verbessern. Allerdings erfordert dies spezielle CSS-Techniken.

CSS-Techniken zur Änderung der Platzhalterfarbe

Verwendung von Pseudo-Elementen

Das ::placeholder Pseudo-Element ist die Standardmethode, um Platzhaltertext zu gestalten. Es zielt auf den Platzhaltertext in Formularfeldern ab. Hier ein Beispiel:

::placeholder {
  color: #999;
}

Diese Methode funktioniert in den meisten modernen Browsern. Überprüfen Sie die Browser-Kompatibilität, wenn Sie diese Technik verwenden.

Tipp: Platzhalter-Kontrast

Stellen Sie sicher, dass die Platzhalterfarbe genügend Kontrast zum Eingabehintergrund hat, um die Lesbarkeit zu verbessern. Verwenden Sie Tools wie den WebAIM Contrast Checker, um das Kontrastverhältnis zu überprüfen.

Browser-spezifische Pseudo-Klassen und Pseudo-Elemente

Für eine breitere Browser-Unterstützung müssen Sie möglicherweise anbieter-spezifische Selektoren verwenden:

  • ::-webkit-input-placeholder für WebKit-Browser (Chrome, Safari, neuere Versionen von Opera):
::-webkit-input-placeholder {
  color: #999;
}
  • ::-moz-placeholder für Mozilla Firefox:
::-moz-placeholder {
  color: #999;
  opacity: 1;
}

Hinweis: Firefox wendet standardmäßig eine Deckkraft auf Platzhaltertext an. Das Setzen von opacity: 1 zeigt die Farbe wie beabsichtigt.

  • :-ms-input-placeholder für Internet Explorer und Edge:
:-ms-input-placeholder {
  color: #999;
}