How to create a "placeholder" for DIV that act like textfield?

html placeholder
user2399158 picture user2399158 · Jun 5, 2013 · Viewed 27.5k times · Source

Div don't have a placeholder attribute

<div id="editable" contentEditable="true"></div>

I want <Please your enter your Name> to show in DIV when the User backspace the whole text in the DIV, or no text on inside, How can I do it?

Answer

mrmoje picture mrmoje · Aug 22, 2013

Here is a pure CSS only solution:-

<div contentEditable=true data-ph="My Placeholder String"></div>
<style>
    [contentEditable=true]:empty:not(:focus):before{
        content:attr(data-ph)
    }
</style>

Here, we basically select all contentEditable <divs> that are empty & blurred. We then create a pseudo element before the CSS selection (the editable div) and fix our placeholder text (specified the data-ph attribute) as its content.

If you are targeting old school CSS2 browsers, change all occurrences of data-ph to title
Correction.......the :empty selector is not supported in IE version 8 and earlier.

Related questions

Change an HTML5 input's placeholder color with CSS

Chrome supports the placeholder attribute on input[type=text] elements (others probably do too). But the following CSS doesn't do anything to the placeholder's value: Value will still remain grey instead of red. Is there a way to change the …

Read More
How do I make a placeholder for a 'select' box?

I'm using placeholders for text inputs which is working out just fine. But I'd like to use a placeholder for my selectboxes as well. Of course I can just use this code: <select> <option value="">Select …

Read More
How do I auto-hide placeholder text upon focus using css or jquery?

This is done automatically for every browser except Chrome. I'm guessing I have to specifically target Chrome. Any solutions? If not with CSS, then with jQuery? Kind regards.

Read More