resize: none 是禁用 textarea 拖拽缩放的唯一可靠方式，但需确保生效：常见失效原因是 css 优先级被覆盖（如 ui 库使用 !important）、样式未匹配真实 textarea 元素、或移动端 safari 存在系统级绕过。
resize: none 是禁用 textarea 拖拽缩放的唯一可靠方式，但必须确保它真正生效——很多情况下写了却没用，问题不在属性本身，而在样式优先级或元素定位。
为什么写了 resize: none 还能拖
最常见原因是 CSS 优先级被覆盖。比如你写了 .form-textarea { resize: none; }，但 Bootstrap 或 Ant Design 的全局规则是 textarea { resize: vertical !important; }，后者的权重更高。
- 用浏览器开发者工具检查目标
textarea元素的「Computed」面板，确认resize值确实是none - 如果被覆盖，加
!important是最快验证手段：resize: none !important; - 注意某些 UI 库会把
textarea包在div里，而样式写在父容器上——你写的规则根本没匹配到真实textarea元素
resize 的合法值和实际效果差异
resize 只对 overflow 为 auto 或 scroll 的块级元素起作用，textarea 默认满足条件，所以能直接用；但不同取值行为差异很大：
-
none：彻底禁用所有方向拖拽，右下角手柄消失 -
vertical：只允许上下拉伸，宽度锁定——这是最常被误用的“半禁用”，仍会破坏响应式布局 -
horizontal：不推荐，拉宽后换行逻辑不变，内容横向溢出，滚动条和文字打架 -
both：等价于默认行为，无需显式声明
移动端 Safari 的特殊表现
iOS 上的 Safari 默认不显示 resize 手柄，但部分版本（尤其是 iOS 16+）仍可通过长按 + 拖动触发系统级缩放，这种行为无法用 CSS 禁用。
- 如果你的应用有强尺寸控制需求（如表单校验、固定网格），仅靠
resize: none不够，还得配合min-width/max-width和min-height/max-height锁死尺寸 - 内联样式
style="resize: none;"最不容易被覆盖，适合临时调试或第三方环境嵌入 - 不要指望
resize在 IE 中工作——它从不支持该属性，但 IE 本来也不显示手柄，所以反而“天然禁用”
真正麻烦的不是写哪一行 CSS，而是你得确认它作用到了哪个 DOM 节点、有没有被更高优先级规则吞掉、以及移动端是否还有隐藏路径可绕过限制——这些细节比语法本身更决定成败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
