如何用div来实现textarea文本框

最新推荐文章于 2024-05-06 15:16:12 发布

原创最新推荐文章于 2024-05-06 15:16:12 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

9 篇文章

订阅专栏

博客介绍了用div实现textarea文本框的方法。先说明了textarea的样式，包括可输入文本、选中有黑色outline框、大小可控可调。接着阐述用div实现的要点，一是用resize指定div可调整大小，二是用contenteditable标签属性指定元素内容是否可编辑。

如何用div来实现textarea文本框

1. textarea样式

1.1可以输入文本

在这里插入图片描述

2.选中时会有黑色outline框

在这里插入图片描述

3.大小可控可调

在这里插入图片描述

2.用div实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 228px;
            height: 150px;
            
            /*给div添加可以调整控制盒子大小的属性*/
            resize: both;
            overflow: auto;
            
            border: 1px solid #a0b3d6;
           
            display: inline-block;
            box-sizing: border-box;
            
            /*控制转中时外边框的颜色*/
            outline-color: #000;
            
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class="box" contenteditable="true">
    /*contenteditable="true"开启该元素的编辑模式*/
    </div>
</body>
</html>