div模拟实现textarea效果

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

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

6 ·

CC 4.0 BY-SA版权

文章标签：

#textarea #div #:empty

HTML5 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用HTML的div元素来模拟textarea输入框的方法，通过CSS样式实现类似textarea的效果，包括占位符、垂直调整大小及自动滚动等功能。

效果展示：

代码实现：

<!DOCTYPE html>
<html>
  <head>
    <title>div实现textarea效果</title>
    <style>
      #textarea {
        height: 200px;
        width: 300px;
        padding: 4px;
        border: 1px solid #888;
        resize: vertical;
        overflow: auto;
      }

      #textarea:empty:before {
        content: attr(placeholder);
        color: #bbb;
      }
    </style>
  </head>
  <body>
    <div id="textarea" contenteditable="true" placeholder="请输入内容..."></div>
  </body>
</html>