CSS Placeholder für contenteditable Elemente

22.06.2016 Will man Bilder oder Smilies in Textfelder (textarea, input) einbinden, kommt man nicht um das contenteditable–Attribut in anderen Elementen (div) herum. Jedoch unterstützen contenteditable aktivierte Elemente keine Placeholder-Funktionalitäten. Placeholder sind Platzhalter in Textfeldern, die einen Hinweis liefern und beim Tippen oder Fokussieren verschwinden. Hier werde ich mit einem kurzen und reinen CSS-Schnipsel zeigen, wie man diese Funktionalität auch mit contenteditable nutzen kann.

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

<div contenteditable="true"></div>

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