Placeholder support for contentEditable elements, without JavaScript
All you need is to add the following CSS:
[contenteditable=true]:empty:before {
content: attr(placeholder);
display: block; /* For Firefox */
}
Notes
- Can add a different style than actual text like opacity, italic, etc
- If your html needs to be 100% compliant, you can replace "placeholder" for "data-placeholder" on both files
- Chrome will add <br />'s inside contentEditable elements in some cases, breaking the :empty check. Can be fixed with a bit of JavaScript.
By Ariel Flesler