contenteditable div with a placeholder

Placeholder for contenteditable div

Found out that my customer wanted to have a placeholder inside a contenteditable div, this is how I did it:

HTML

<div contenteditable data-placeholder=”Click me and start typing!”></div>

CSS

[contenteditable] {
    padding:12px; 
}
[data-placeholder]:empty:before {
     content: attr(data-placeholder);
     color: #888;
     font-style: italic;
}

That’s all, enjoy!