用div来模拟textarea，textarea高度自适应

最新推荐文章于 2023-07-16 21:39:38 发布

格格巫仙女

最新推荐文章于 2023-07-16 21:39:38 发布

阅读量129

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_42340514/article/details/117769689

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<head>
    <title>div模拟textarea</title>
    <style>
        .editdiv{
            border:1px solid #a0b3d6;
            width: 500px;
            min-height:100px;
            font-size: 14px;
            padding: 4px;
            color: #333;
            outline:0; /* 解决聚焦边框 */
        }
 
        /* 添加placeholder属性 */
        /* :empty 选择器匹配没有子元素且没有文本节点的元素。 */
        .editdiv:empty::before{
            content:attr(placeholder);
            color: #999;
        }
    </style>
</head>
<body>
    <!--解决了： textarea高度不能随文本动态，超出会出现滚动条 -->
    <!-- contenteditable="true" 可以将标签改为可编辑的标签 -->
    <div class="editdiv" contenteditable="true" placeholder="请输入内容..."></div>
    <p class="editdiv" contenteditable="true" placeholder="请输入内容..."></p>
</body>
</html>

格格巫仙女

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用div来模拟textarea，textarea高度自适应

<!DOCTYPE html><head> <title>div模拟textarea</title> <style> .editdiv{ border:1px solid #a0b3d6; width: 500px; min-height:100px; font-size: 14px; paddi
复制链接

扫一扫