Insérer un placeholder dans une <div>.

HTML & C.S.S


HTML
Dans le HTML il suffit de créer une DIV en mentionnant l' attribut universel data-
Le nom du suffixe étant libre, j' ai utilisé placeholder.
ex: data-placeholder, data-toto etc...

<div contenteditable="true" data-placeholder='Vous pouvez écrire du texte ICI'></div>

N.B il ne doit pas y avoir d' espace ou de retour-chariot entre l' ouverture et la fermeture de la <div>.


C.S.S
Les pseudo-classe :empty et :before sont utilisées pour gérer l' affichage.

[data-placeholder]:empty:before{content:attr(data-placeholder);font-style:italic;color:grey;}



Compatible avec tous les navigateurs