resize: none 单独使用无效，因 css 规范要求必须配合 overflow: auto 或 hidden（推荐 auto）才能生效；textarea 默认 overflow: visible 会导致该声明被浏览器静默忽略。
resize: none 单独写根本无效
直接给 textarea 加 resize: none 却发现手柄还在、拖拽照常？这不是浏览器 bug，是 CSS 规范强制要求：resize 属性只在元素的 overflow 值不为 visible 时才生效。而 textarea 默认就是 overflow: visible，所以这行样式会被浏览器静默忽略。
必须同时设置 overflow ——推荐用 overflow: auto，它既满足规范要求，又保留内容溢出时的滚动能力；overflow: hidden 虽然也生效，但会直接裁掉超出部分，用户看不见也滚不了。
常见错误写法：
-
textarea { resize: none; }（漏overflow，不生效） -
textarea { resize: none; overflow: visible; }（显式设回visible，照样不生效）
为什么不用 ::resizer 伪元素隐藏手柄
::resizer 是个“样子货”——它只允许微调手柄外观（比如改背景色、透明度），但无法移除或禁用。试图用 display: none 或 visibility: hidden 隐藏它，全无效；opacity: 0 只会让手柄变透明，区域仍占位、仍可触发拖拽。
更关键的是兼容性差：::-webkit-resizer 在 Chrome/Safari 支持有限，Firefox 虽稍好但也不稳定，Edge 基本不响应。它不是 resize: none 的替代方案，而是完全不同的用途：一个管行为，一个管皮肤。
只禁用部分 textarea，别污染全局
别一上来就写 textarea { resize: none; overflow: auto; } ——这会把所有 textarea 都锁死，包括你可能想留着拖拽的管理后台输入框。
用精准选择器控制范围：
- 按 class：
.comment-input { resize: none; overflow: auto; }，HTML 中写<textarea class="comment-input"></textarea> - 按 name：
textarea[name="bio"] { resize: none; overflow: auto; } - 按 id：
#description { resize: none; overflow: auto; }
内联样式 <textarea style="resize: none; overflow: auto;"></textarea> 虽快，但上线后难调试、难覆盖，不建议长期使用。
移动端和旧环境的真实表现
iOS Safari 默认禁用 resize 行为，写了 none 是冗余但安全；Android WebView 尤其 4.x 系统可能直接忽略该声明，必须真机测试，不能只信模拟器。
IE 全系列（含 IE11）完全不支持 resize，对它们来说本来就没有手柄，无需处理；旧版 Safari（≤5.1）可能忽略 resize: none，但 2026 年已基本可忽略。
真正容易被忽略的不是怎么关掉拖拽，而是关掉之后：内容变多时高度怎么适配？要不要加 rows？要不要监听 input 事件用 scrollHeight 自适应？否则用户输几行就卡住看不见了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
