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);
}
@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