如何用div模拟input 的做用

用div 模拟input

一、若是用div模拟input 那input的placeholder怎么办？ div是不支持placeholder属性的 那么如何实现内容为空的时候显示一个默认的文字呢？

<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)
}

使用css伪元素须要注意什么？