css - HTML - DIV 的占位符

Question

我想为我的 DIV 标记添加一个占位符，它会在 DIV 未处于焦点且没有文本时出现。我知道有多个 SO 链接，但每个人提供的通用解决方案似乎对我不起作用。以下是 HTML 和 CSS。为什么这不起作用？

代码:

#composeBody:empty:not(:focus):before{
  content:attr(data-placeholder);
  color: #555;
  display: block; /* For Firefox */
}

<div id="composeBody" data-placeholder="Start composing your message..." contenteditable="true"></div>

Answer 1

there are lot of options using javascript, but if you want to do it in css.Try this:[contentEditable=true]:empty:not(:focus):before{    content:attr(data-text)}
html: div( contentEditable=true data-text="Enter text here")(/div)