如何用div模擬input 的做用

用div 模擬input

一、若是用div模擬input 那input的placeholder怎麼辦? div是不支持placeholder屬性的 那麼如何實現內容爲空的時候顯示一個默認的文字呢?css

<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僞元素須要注意什麼?html

相關文章
相關標籤/搜索