textarea 固定大小和禁止拖动

ych0108

于 2013-09-27 14:18:57 发布

阅读量3.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： front 文章标签： html textarea固定 textarea禁止拖动

本文链接：https://blog.youkuaiyun.com/ych0108/article/details/84483904

front 专栏收录该内容

40 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>