CSS - Placeholder support for contentEditable elements

contentEditable-placeholder.css

/ *
  * Exemple:
  * <div contenteditable="true" placeholder="Enter text here..."></div>
  *
  */

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

This does not work in IE11.To have cross browser compatibility we nee to add maintain extra div element to hold the placeholder and hide or remove when typed something in contentEditable div

Hi, shravya95,

Please can you provide an example of this. I am currently stuck on this.

Thank you.

I had some issues in Edge with this, when copying/pasting. It was pasting all of the paragraphs in reverse order and this was fixed by replacing before with after. No idea why that fixed it, but i'd love to know.

I have added not(:focus), and now it`s working for IE also

&[contenteditable]:not(:focus):empty:before {
	content: attr(placeholder);
	display: block;
}