Add a placeholder to a contenteditable div with CSS

forest with moist grass
portrait of Fatos Bediu
Fatos Bediu Tech Lead

development 14/10/2021


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:

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.

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:


Boost your customer support with Answerly Products!

See How