Blog

Zuerst einmal nutzen wir ein DIV um ein Eingabefeld zu simulieren:

Nun der CSS-Code:

div[contenteditable][placeholder]:empty:not(:focus):before {
    content: attr(placeholder);
}

Es werden alle DIVs gewählt, die ein contenteditable und placeholder Attribut haben. Diese erhalten den Inhalt des Placeholders (attr(placeholder)) an erster Stelle (:before), insofern der Inhalt des Containers (div) leer (:empty) und nicht fokussiert (:not(:focus)) ist. Sobald wir nun in das Feld klicken (:focus) oder etwas schreiben (:empty) verschwindet der Platzhalter.

Will man, dass der Platzhalter nur verschwindet wenn man etwas schreibt, kann man den (:not(:focus)) Teil entfernen:

div[contenteditable][placeholder]:empty:before {
    content: attr(placeholder);
}

Damit man einen Unterschied zwischen dem Text und dem Platzhalter hat, kann man dessen Farbe etwas anpassen. Bei nativen (Text)-Feldern ist es meist eine Graustufe. Im ersten Beispiel würde es so aussehen:

div[contenteditable][placeholder]:empty:not(:focus):before {
    content: attr(placeholder);
    color: #aaa;
}

Browser-Unterstützung

• :before
• :empty and :not()
• :focus
• content: attr() – wird offiziell nicht supported, scheint aber in allen gängigen Browsern (Chrome, Firefox, IE, Edge, Opera) mit :before und :after Selektoren zu funktionieren.
• Firefox zeigt den Platzhalter an, aber sobald man tippt und das Feld wieder leert, erscheint der Platzhalter nicht mehr.

Bei Codepen.io kann man das Ganze mit Beispielen und auf Englisch noch einmal betrachten