Fixing contenteditable placeholders with 3 lines of CSS.

Contenteditables are a great improvement over textarea. However, they don't support placeholders. Here's a quick CSS polyfill.

First, a quick recap:

Almost all elements support the contenteditable attribute, which makes them editable by the user. While you could just throw a textarea and be done with it, contenteditables can contain arbitrary HTML and thus arbitrary formatting. You can even build a full-featured quickly editor thanks to the execCommand API.

Contentediables are well-supported now, except for a few minor things. One of them is that they don't support placeholders. If you do this:

<div contenteditable="true" placeholder="Enter a nice comment here"></div>

The div will appear as initially empty. However, you can fix this with CSS:

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