Skip to content

Instantly share code, notes, and snippets.

@oswaldoacauan

oswaldoacauan/contentEditable-placeholder.css

Created August 29, 2013 23:52
Show Gist options
  • Save oswaldoacauan/6384794 to your computer and use it in GitHub Desktop.
Save oswaldoacauan/6384794 to your computer and use it in GitHub Desktop.
Download ZIP
CSS - Placeholder support for contentEditable elements
Raw
contentEditable-placeholder.css
/ *
* Exemple:
* <div contenteditable="true" placeholder="Enter text here..."></div>
*
*/
[contenteditable=true]:empty:before {
content: attr(placeholder);
}
@shravyaRB
Copy link

shravyaRB commented Oct 25, 2016 •
edited
Loading

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

@khennny
Copy link

khennny commented Sep 28, 2017

Hi, shravya95,

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

Thank you.

@elmarti
Copy link

elmarti commented Jan 10, 2018

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.

@toly-ua
Copy link

toly-ua commented Jun 7, 2019

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment