textarea 固定大小和禁止拖动

固定textarea大小

最新推荐文章于 2023-08-07 13:59:37 发布

原创最新推荐文章于 2023-08-07 13:59:37 发布 · 3.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #textarea固定 #textarea禁止拖动

front 专栏收录该内容

40 篇文章

订阅专栏

本文介绍如何通过CSS设置HTML的textarea标签的大小并禁止用户调整其大小，以保持网页布局的一致性和美观。

textarea 在浏览器中固定大小和禁止拖动
HTML 标签 textarea 在大部分浏览器中只要指定行（rows）和列（cols）属性，就可以规定 textarea 的尺寸，大小就不会改变，不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同，可以拖动右下角图标改变大小。但是过分拖动大小会影响页面布局，使页面变得不美观。可以通过添加如下两个样式禁用拖动，固定大小：

1：彻底禁用拖动（推荐）
resize: none;
2：只是固定大小，右下角的拖动图标仍在
width: 200px;
height: 100px;
max-width: 200px;
max-height: 100px;

  <tr>
      <th align="left">备      注：</th>
     <td> <textarea name="remark" cols="36" rows="8" id="content" style="border: 1 solid #888888;LINE-HEIGHT:18px;padding: 3px;width:370px;hight:170px;max-width: 370px;max-height: 170px;resize: none;"></textarea>
     </td>
    </tr>