CODEWITHSUNDEEP
jqueryhtmlcsscontenteditableplaceholder
JaviZu
JaviZu

Reputation: 497

Some div with placeholder

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!

Upvotes: 1

Views: 952

Answers (1)

4dgaurav
4dgaurav

Reputation: 11506

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

Upvotes: 1

Related Questions