纯 css 实现 placehoder 效果

发表于 分类于 ， 本文字数： 377 阅读时长 ≈ 1 分钟

如何使用 CSS 实现当内容为空时，显示 placeholder 呢？

代码如下：

html

1
2
3
4
<div id="css-placeholder">
  <div class="editor" contentEditable="true" placeholder="请输入内容...">
  </div>
<div>

scss

1
2
3
4
5
6
#css-placeholder{
  [contentEditable='true']:empty:before {
    content: attr(placeholder);
    color: black;
  }
}

演示地址: css placeholder - 码上掘金 (juejin.cn)