实现表单元素的placeholder效果

标题在其他元素中添加placeholder效果

在h5中给input标签添加了一个占位符属性placeholder用来做提示文本
可是我想在其他元素里使用这个属性，那怎么办呢**？**

1.新建一个div让它变成可编辑状态

//css
#test{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
//html
  <div id="test" contenteditable="true"></div>

contentEditable是h5中新添加的全局属性，contentEditable属性可以让元素变为一个可编辑状态
2.我们用**:empty 选择器 :before 选择器**进行设置

#test:empty::before{
            content: "请输入。。";
            color: grey;
        }

:empty 选择器匹配没有子元素（包括文本节点）的每个元素
:before 选择器在被选元素的内容前面插入内容

当这个元素在没有子元素或文本时通过：before选择器在元素前面添加一个内容（这个内容是在元素内部添加的）
效果如下：

3.实现div获取焦点时提示文字的显示和隐藏

  #test:focus::before{
            content: none;
        }

:focus 选择器用于选取获得焦点的元素
当我选中div时通过：before让content的值为none;
效果如下：