::placeholder

Das ::placeholder Pseudo-Element (oder in manchen Fällen eine Pseudo-Klasse, je nach Browser-Implementierung) ermöglicht es Ihnen, den Platzhaltertext eines Formularelements zu gestalten. Und zwar den Text, der mit dem placeholder-Attribut gesetzt wurde.

<input type="email" placeholder="[email protected]">

Sie können diesen Text in den meisten Browsern mit dieser Mischung aus herstellerspezifischen Präfixen gestalten.

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

Wichtiger Hinweis: Diese Syntax ist nicht standardisiert, daher die ganze Namens-Wirrwarr. Sie kommt in der Spezifikation überhaupt nicht vor. :placeholder-shown ist standardisiert, und selbst Spezifikationsautoren scheinen zu denken, dass ::placeholder die standardisierte Version sein wird.

Wie bei jedem Pseudo können Sie es bei Bedarf auf bestimmte Elemente anwenden, wie z. B.:

input[type="email"].big-dog::-webkit-input-placeholder {
  color: orange;
}

Demo

Der Unterschied zwischen :placeholder-shown und ::placeholder

:placeholder-shown dient dazu, das Eingabeelement auszuwählen, wenn sein Platzhaltertext angezeigt wird. Im Gegensatz zu ::placeholder, das den Platzhaltertext gestaltet.

Hier ist eine Grafik

Ich fand das sehr verwirrend, da

1. die Spezifikationen nur :placeholder-shown und nicht ::placeholder enthalten.
2. :placeholder-shown kann immer noch die Gestaltung des Platzhaltertextes beeinflussen, da es ein Elternelement ist (z. B. Schriftgröße).

Beachten Sie, dass :placeholder-shown eine Pseudo-Klasse ist (ein Element in einem bestimmten Zustand) und ::placeholder ein Pseudo-Element (ein sichtbares Ding, das nicht wirklich im DOM ist). Unterscheidbar durch ein- oder doppelten Doppelpunkt.

Tab Atkins hat es mir per E-Mail erklärt.

:placeholder-shown, als Pseudoklasse, muss ein existierendes Element auswählen – es wählt die Eingabe aus, wann immer Sie sich im Platzhalter-Anzeigemodus befinden. Das ::placeholder Pseudoelement umschließt den eigentlichen Platzhaltertext.

Element oder Klasse?

Diese Funktionalität ist nicht standardisiert. Das bedeutet, dass jeder Browser eine andere Vorstellung davon hat, wie sie funktionieren soll.

Firefox hat dies ursprünglich als Pseudoklasse implementiert, hat es aber aus einigen Gründen geändert. Um es kurz zu machen, mit einer Pseudoklasse kann man nicht so viel machen.

Wenn Sie zum Beispiel die Textfarbe ändern möchten, wenn das Eingabefeld fokussiert ist. Sie würden einen Selektor wie input:focus::placeholder verwenden, was mit einer Pseudoklasse nicht möglich wäre (sie stapeln sich nicht auf dieselbe Weise).

IE10 unterstützt dies als Pseudoklasse anstelle eines Elements. Alle anderen haben ein Pseudoelement implementiert.

Firefox Platzhalterfarbe

Sie werden vielleicht bemerken, wie die Farbe des Platzhalters in Firefox verblasst aussieht im Vergleich zu anderen Browsern. Im Bild unten ist Firefox 43 links und Chrome 47 rechts dargestellt.

Das liegt daran, dass standardmäßig allen Platzhaltern in Firefox ein Opazitätswert zugewiesen wird. Um dies zu beheben, müssen wir diesen Wert zurücksetzen.

::-moz-placeholder {
  opacity: 1;
}

Mehr dazu erfahren Sie, indem Sie diese Demo in Firefox testen.

Unterstützte Stile

Das Pseudoelement unterstützt die Gestaltung dieser Eigenschaften

• font-Eigenschaften
• color
• background-Eigenschaften
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• text-indent
• opacity

Die Pseudoklasse unterstützt ebenfalls die meisten (wenn nicht alle) dieser Eigenschaften, ist aber aus den oben genannten Gründen nicht so flexibel.

Browser-Unterstützung

Weitere Ressourcen

• MDN Docs
• „Das CSS3 Placeholder Pseudo-Element“ von Guil Hernandez
• „Styling HTML placeholder attribute“ von Mounir Lamouri
• „Styling Placeholders“ von Tab Atkins

Verwandte Eigenschaften