如何通过HTML textarea标签的resize属性实现拖动调整大小？

本文共计914个文字，预计阅读时间需要4分钟。

直接说结论：

为什么写了 resize: none 还能拖？

最常见原因是样式被覆盖或没命中目标元素。

• 第三方 UI 库（如 Ant Design）常把 textarea 包在 <div> 里，你写的 textarea { resize: none; } 没生效，因为真实渲染的 textarea 可能带了 class 或被封装了
• 框架 CSS 权重更高，比如 Bootstrap 写了 textarea { resize: vertical !important; }，你的规则就被压住了
• 用浏览器开发者工具检查「Computed」面板，确认 resize 的最终计算值是不是 none
• 内联样式最稳：<textarea style="resize: none;"></textarea>，不用加 !important

resize 值选 none、vertical 还是 both？

vertical 看似“只调高”，实际仍会撑破容器宽度；both 更危险，用户一拉就歪比例；只有 none 是真正可控的。