div中使用placeholder
使用CSS实现div
的placeholder
效果
使用:empty
伪类和content
属性:可以通过CSS的:empty
伪类和content
属性来实现。当div
为空时,使用:before
伪元素显示提示文本。例如:
HTML部分:
<div contenteditable="true" data-placeholder="请输入内容..." class="send-content"></div>
CSS部分:
.send-content{
position:relative;
outline:none;
z-index:1;
&:empty::before{
position:relative;
color:lightgray;
content:attr(data-placeholder);
z-index:-1;
}
}