placeholder 是HTML5中input的属性,但该属性并不支持除input以外的元素
但我们可以使用Css before选择器来实现完全相同的效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Div+placeholder</title><style>.rich{color:balck;width:100px;height:100px;border: 1px solid red;margin: 20px 50%;}/*为空时显示 element attribute content*/.rich:empty:before{content: attr(placeholder); /* element attribute*//*content: 'this is content';*/color:#red;}/*焦点时内容为空*/.rich:focus:before{content:none;}</style>
</head>
<body><div class='rich' contenteditable="true" placeholder='当 element 内容为空时,我就会出现'></div>
</body>
</html>
效果:
参考:
HTML5 placeholder
CSS :before 选择器
线上Demo:DIV实现css placeholder效果
取得效果还是实现效果、
From WizNote