Add a placeholder to a contenteditable div with CSS

It's not hard to make input fields user-friendly - simply add a title or a description above, and that's it. But this won't work with all design systems, specifically when you have many input fields on one settings page.

So what do we do in this case? Well, we add placeholders! They're practical, straightforward, and do not take any extra space at all.

But when we're building an input element with contenteditable, then that's a different story. Placeholders are supported only by html5 elements explicitly created for text input such as input or textarea, so to make a DIV with a placeholder, we have to start writing some code!

Here is a preview of our solution in codepen:

See the Pen Contenteditable placeholder by fatos (@fatosbediu) on CodePen.

There are multiple ways to create placeholders manually, and I'll start with my favorite one:

Making the placeholder attribute functional using the CSS function "content."

With this solution, we can simply use the placeholder attribute the same as any other, but we will use some CSS trickery to make it happen.

[contentEditable=true]:empty:before {
    content: attr(placeholder);
    opacity: 0.6;
}

Here's an explanation of what's going on:

• We first select all divs by the attribute contentEditable=true using the square brackets selector [].

• We continue our selector with the pseudo-class :empty to further narrow the selection only to elements with no text content or other children elements.

• And then, we use ::before to create a pseudo-element that takes the content of the placeholder attribute by using the CSS function content.

With this beautiful solution, you can style the placeholder in any way you want by simply typing in your CSS properties inside this whole selector - as you can see, an example of how I've added "opacity" so it looks more like a placeholder.

Browser support

This feature is supported by IE 9 and forward. We can confirm this by looking up the properties separately in caniuse.com.

• css content function
• :before
• :empty
• attribute selector

My thoughts

If you can, avoid contenteditable. It's full of edge cases and pitfalls that become a headache quickly.

I've built a WYSIWYG editor in contenteditable and shared my experience. You can read more about it here.

References:

• contenteditable in MDN
• :empty pseudo class
• attribute selector