Is it possible to add placeholder in div tag

Question

I would like to display some text to the user when my div element is empty.

I have tried adding a placeholder attribute to my div but the text is not being displayed.

<div placeholder="Enter the text"> </div> 

How can I display a message when my div element is empty?

Answer 1

There are lot of options using javascript, but if you want to do it in css.Try this:

html:

<div contentEditable=true data-text="Enter text here"></div> 

css:

[contentEditable=true]:empty:not(:focus):before{     content:attr(data-text) } 

Demo

Answer 2

i have already answered to such a question here with this test : http://codepen.io/gcyrillus/pen/hzLIE

div:empty:before {   content:attr(data-placeholder);   color:gray } 

see If editable div have no text than set placeholder