resize: none是禁用textarea拖拽的唯一可靠方式，但必须确保作用于真实元素、overflow设为auto/hidden/scroll且未被更高优先级规则覆盖。
resize: none 是禁用 textarea 用户拖拽缩放的唯一可靠方式，但它必须生效才算数——写了却还能拖，问题几乎全出在样式没作用到真实元素、overflow 缺失或被更高优先级规则覆盖。
为什么 resize: none 写了还是能拖
不是语法错，是浏览器根本没执行它。CSS 规范要求：resize 只在 overflow 为 auto、hidden 或 scroll 时才起效；而 textarea 默认 overflow: visible，此时整条声明会被忽略。
- 打开开发者工具 →「Computed」面板 → 搜索
resize，确认最终计算值是不是none - 检查
overflow计算值是否为visible：如果是，加overflow: auto就能立刻修复 - 第三方 UI 库（如 Element Plus）中，真实
textarea带.el-textarea__inner类，直接写textarea { resize: none; }匹配不到 - Bootstrap 4+ 默认有
textarea { resize: vertical !important; }，你的普通规则权重不够
如何确保样式作用到真实 textarea 元素
关键不是选对属性，而是选对目标节点。UI 库封装后，textarea 往往藏在深层 DOM 里，且父容器样式不透传。
- 全局生效（慎用）：
.el-textarea__inner { resize: none !important; overflow: auto; }——!important是必须的，因库内联了resize: both - 局部生效（推荐）：在 Vue SFC 的
<style scoped></style>中写.el-textarea__inner { resize: none; overflow: auto; }，并确保该样式文件加载顺序在 Element Plus 样式之后 - 精准定位（最稳）：
textarea[name="comment"] { resize: none; overflow: auto; }或#bio-input { resize: none; overflow: auto; } - 内联写法（仅调试）：
<textarea style="resize: none; overflow: auto;"></textarea>—— 它不被任何外部样式覆盖，但无法用 DevTools 临时修改
resize 各取值的实际效果与风险
vertical 不等于安全，反而是最常误用的“半禁用”方案：它允许用户无限拉高，极易撑破布局，尤其在 Safari 下可能因缺少 min-width/max-width 导致宽度异常。
-
none：唯一真正禁用，右下角手柄消失，用户完全无法拖拽 -
vertical：只留上下手柄，但若没配max-height和box-sizing: border-box，padding/border 会叠加导致超限 -
horizontal：对textarea几乎无意义，固定宽度场景下改宽反而破坏网格 -
both：默认值，Chrome/Safari 显示斜向双箭头；Firefox 虽不显示手柄，仍响应拖拽（需配合overflow才生效）
移动端和 UI 库里的隐藏陷阱
iOS Safari 在某些版本（尤其是 iOS 16+）中，即使 resize: none 生效，仍可能通过长按 + 拖动触发系统级缩放，这种行为 CSS 无法拦截。更麻烦的是，Element Plus 等库的 el-input 组件不支持 style 透传，写 <el-input type="textarea" style="resize: none;"></el-input> 完全无效——因为样式绑定在父容器上，压根没进到内部 textarea。
- 不要依赖
user-scalable=no来管textarea：那是 viewport 层面的事，和元素级缩放无关 - 避免全局重置
textarea { resize: none; }：会误伤日志面板、调试器等需要二维调整的场景 - 移动端建议用
em或rem配min-height/max-height，比px更稳定 - 真正决定成败的，从来不是哪一行 CSS，而是你能否确认它作用到了哪个 DOM 节点、有没有被更高优先级规则吞掉、以及移动端是否还有隐藏路径可绕过
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
