HTML表单多行文本控件禁止拖动大小的设置-html教程-PHP中文网

resize: none是禁用textarea拖拽的唯一可靠方式，但必须配合overflow: auto或hidden才能生效，因css规范要求resize仅在overflow非visible时起作用；单独使用无效。

html表单多行文本控件禁止拖动大小的设置

resize: none 是禁用 textarea 拖拽的唯一可靠方式，但它几乎总要和 overflow: auto 一起写，否则在绝大多数浏览器里压根不生效。

根本原因不是浏览器不支持，而是 CSS 没真正起作用。常见失效路径有三个：

overflow 缺失：CSS 规范强制要求，resize 只在 overflow 为 auto、scroll 或 hidden 时才被解析；默认 textarea 的 overflow: visible 会让整个 resize 声明被忽略
样式被覆盖：比如 Bootstrap 或 Ant Design 的全局规则是 textarea { resize: vertical !important; }，你的普通选择器权重不够
元素没匹配上：UI 组件库（如 <el-input type="textarea"></el-input>）渲染出的 textarea 带了 class（如 el-textarea__inner），直接写 textarea { ... } 根本不命中

验证是否生效，打开开发者工具 → 「Computed」面板 → 搜索 resize，看最终计算值是不是 none。

只写 resize: none 是无效的；必须显式声明 overflow 才触发规范约束。推荐用 auto 而非 hidden，因为前者保留滚动能力，后者会直接裁剪溢出内容。

正确写法示例：

textarea {
  resize: none;
  overflow: auto;
}

错误写法（不生效）：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

textarea {
  resize: none;
  /* 没有 overflow，被忽略 */
}

如果同时设了 max-height 却漏掉 overflow，内容超出后不会出现滚动条，用户看不到下半截文字。

全局重置 textarea { resize: none; } 很危险——调试面板、日志输入框这类需要自由调整尺寸的控件会被一并锁死。精准控制靠选择器，但要注意封装层级和优先级：

按 class：.comment-field { resize: none; overflow: auto; }，HTML 中写 <textarea class="comment-field"></textarea>
按 name：textarea[name="description"] { resize: none; overflow: auto; }
按 id：#bio-input { resize: none; overflow: auto; }
慎用内联样式：<textarea style="resize: none; overflow: auto;"></textarea>，调试时难覆盖，且容易被框架剥离

若 UI 库用了封装容器（如 <div class="el-textarea"><textarea class="el-textarea__inner"></textarea></div>），规则必须写成 .el-textarea__inner { ... } 才命中。