Some div with placeholder

Question

I want to create a placeholder in my editable "divs". I have some divs like this:

<div id="introDatos" class="test marco-cabecera" contenteditable="true" placeholder="Escribe aquí los datos...">

<div id="introNumeros" class="test marco-cabecera" contenteditable="true" placeholder="Escribe aquí los números...">

And my CSS to do it is:

 .test {
    border: 1px #e4e4e4 solid;
    padding: 25px 20px;
}

.test[placeholder]:empty:before {
    content: attr(placeholder);
    color: #555; 
    opacity: 0.3;
}

It works almost good. The point is that it only shows me the first div's placeholder by default. I need to click in the next divs to see its placeholder.

Any idea what I'm doing wrong? Any suggestion to do it in another way?

Thanks!

You didn't close `
` elements by `
`. I've modified the posted code to use `data-*` attributes which works well for me: http://jsbin.com/buced/1/edit — Hashem Qolami, Aug 16 '14 at 09:51

score 1 · Accepted Answer · answered Aug 16 '14 at 09:54

Demo

enter image description here

css

data-attributes in css are directly applied, i.e. not using the class or id of the div.

[contentEditable="true"] {
    border: 1px #e4e4e4 solid;
    padding: 25px 20px;
}
[contentEditable="true"]:empty:not(:focus):before {
    content:attr(data-placeholder);
    color: #555;
    opacity: 0.3;
}

Some div with placeholder

1 Answers1