请用一个 div盒子 实现 textarea文本域?-QUI-Notes

1.html布局

<div class="textarea" contenteditable="true"  placeholder="请输入..."></div>

2.css样式

.textarea{width: 300px;min-height: 60px;background: #f6f7f8;padding:10px 15px;border-radius: 8px;}
.textarea:empty::before{content:attr(placeholder);color: #999;}

3.总结分析

主要是用 contenteditable="true" 实现元素可编辑，又通过css的:empty 空元素判断是否清空占位符内容，占位符通过css的伪元素+attr传参实现。