resize仅在overflow为auto、hidden或scroll时生效；textarea默认overflow:visible，故resize:none被忽略；需同时设置overflow:auto才有效。
resize 是控制 HTML 表单文本控件（主要是 textarea）是否允许用户拖拽调整尺寸的核心 CSS 属性，但它不是“写了就生效”的开关——它依赖于其他样式条件，且对 input[type="text"] 完全无效。
为什么 resize: none 写了还是能拖
根本原因不是语法错，而是浏览器直接忽略该声明。CSS 规范强制要求：resize 仅在元素的 overflow 计算值为 auto、hidden 或 scroll 时才起作用；而 textarea 默认 overflow: visible，此时整个 resize 声明被丢弃。
- 验证方式：打开开发者工具 → 「Computed」面板 → 搜索
resize，看最终值是不是none - 第三方 UI 库（如 Ant Design、Element Plus）常把真实
textarea包在div里，类名类似.el-textarea__inner，直接写textarea { resize: none; }根本不匹配 - Bootstrap 4+ 默认写了
textarea { resize: vertical !important; }，你的普通规则权重不够 - 最稳写法是内联：
<textarea style="resize: none; overflow: auto;"></textarea>
resize: vertical 的隐藏风险
它只禁用水平拖拽，但用户仍可无限拉高——这比完全放开更危险，因为容易撑破布局。
- 没配
max-height时，可能拉到遮挡按钮、挤掉其他表单项，甚至触发父容器溢出 - Safari 下，哪怕写了
width: 100%，resize: vertical也可能因缺少min-width或max-width导致宽度意外收缩或撑开 - 错误写法：
textarea { resize: vertical; height: 120px; }——height是初始值，不构成约束 - 正确配对：
min-height: 6em; max-height: 6em; box-sizing: border-box;，避免padding和border算进高度后超限
如何精准控制特定 textarea 而非全局重置
全局写 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; } - 慎用内联样式（虽然最稳），因为它无法复用，且维护成本高
size 和 cols 属性只适用于静态宽度控制
size（用于 input[type="text"]）和 cols（用于 textarea）是 HTML 属性，它们定义的是“字符数宽度”，而非像素。它们与 resize 无关，也不影响拖拽行为。
-
<input type="text" size="30">：约显示 30 个英文字符宽，受字体、缩放影响，不响应式 -
<textarea cols="50"></textarea>：同理，且仅控制初始宽度，用户仍可通过resize拖动改变 - 现代项目中，建议用 CSS
width+max-width替代size/cols，更可控、更语义清晰
真正难的不是让拖拽消失，而是判断哪些 textarea 真的不该被拖——比如评论框要限制，但后台 SQL 日志框必须保留二维调整能力。选错作用域或漏掉 overflow，就等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
