How to simulate the role of input with div

Simulate input with div

1. What if the placeholder of the input is simulated with a div? Div does not support the placeholder attribute, so how to display a default text when the content is empty?

<span style="font-family:Simhei;"></span>
<div class="input"   contenteditable    placeholder="请输入文字"></div>



.input{
    width:200px;
    height:24px;
    line-height:24px;
    font-size:14px;
    padding:5px 8px;
    border:1px solid #ddd;
}

.input:empty::before{
      // content 内容有两种：a、固定的字符串‘ddd’   b、 attr(元素属性)
    content: attr(placeholder)
}

What should I pay attention to when using css pseudo-elements?