:placeholder-shown

Die :placeholder-shown Pseudoklasse wählt das Eingabeelement selbst aus, wenn Platzhaltertext in einer Formulareingabe vorhanden ist. Betrachten Sie es als eine nette Möglichkeit, zwischen Eingaben zu unterscheiden, die gerade Platzhaltertext anzeigen und denen, die es nicht tun.

input:placeholder-shown {
  border: 5px solid red;
}

Die Idee hinter Platzhaltern

Textbasierte <input>s und die <textarea>-Eingabe können Platzhaltertext haben. Das ist Text, der angezeigt wird, wenn die Eingabe leer ist, um einen möglichen Wert vorzuschlagen. Zum Beispiel könnte ein Formular, das nach einer Schule fragt, eine Beschriftung dafür haben, was es fragt, aber dann „Forest Hills Example High School“ im Platzhalter als Beispielwert vorschlagen

<label for="school">School Name:</label>
<input placeholder="Forest Hills Example High School" type="text" name="school" id="school">

Der Unterschied zwischen :placeholder-shown und ::placeholder

:placeholder-shown dient dazu, die Eingabe selbst auszuwählen, wenn ihr Platzhaltertext angezeigt wird. Im Gegensatz zu ::placeholder, das den Platzhaltertext stylt.

Hier ist eine Grafik

Ich fand das sehr verwirrend, da

1. die Spezifikationen nur :placeholder-shown und nicht ::placeholder enthalten
2. :placeholder-shown den Stil des Platzhaltertextes dennoch beeinflussen kann, da es sich um ein Elternelement handelt (z. B. Schriftgröße).

Beachten Sie, dass :placeholder-shown eine Pseudo-Klasse (es ist ein Element in einem bestimmten Zustand) und ::placeholder ein Pseudo-Element (ein sichtbares Ding, das nicht wirklich im DOM vorhanden ist) ist. Unterscheidbar durch einzelne bzw. doppelte Doppelpunkte.

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

:placeholder-shown muss als Pseudoklasse ein vorhandenes Element auswählen. Es wählt die Eingabe aus, wann immer Sie sich im Zustand des angezeigten Platzhalters befinden. Das ::placeholder-Pseudoelement umschließt den eigentlichen Platzhaltertext.

Wenn Sie den Platzhaltertext stylen müssen

Verwenden Sie ::placeholder (tatsächlich, verwenden Sie alle verrückten Vendor-Präfixe dafür), die wir hier im Almanach detailliert beschrieben haben.

Weitere Informationen

• Selectors Level 4 Spec

Browser-Unterstützung