textarea默认可拖拽因浏览器设resize: both且overflow: auto，禁用需确保resize: none生效，关键在优先级、选择器精确性及overflow非visible。
直接加 resize: none 就行，但必须确保它真正生效——很多人写了却没用，问题不在属性本身，而在选择器优先级、继承关系或 overflow 配置。
textarea 默认为什么能拖拽？
现代浏览器（Chrome/Firefox/Safari/Edge）给 textarea 设了默认 resize: both，右下角那个小三角就是它在起作用。IE 完全不支持 resize，所以天然“禁用”，但这不是你该依赖的逻辑。
关键点在于：resize 只对 overflow 不是 visible 的块级元素生效。而 textarea 默认 overflow: auto，所以它天然满足触发条件。
为什么写了 resize: none 却还是能拖？
常见失效原因有这几个：
立即学习“前端免费学习笔记（深入）”；
- 被框架样式（如 Bootstrap、Tailwind）覆盖，
resize规则优先级不够，得加!important或提高选择器 specificity（比如写成textarea.form-control） - 只写了
resize: vertical，误以为“没 horizontal 就等于禁用”——其实垂直方向仍可拖，布局照样被撑开 - 用内联样式但拼写错误，比如写成
style="reszie: none"（少了个i）或引号不闭合 - 目标元素是动态插入的，CSS 规则加载早于元素创建，导致未命中
怎么写才稳妥？三种实操方式对比
推荐按场景选，别硬套一种：
-
全局禁用：在 CSS 文件里写
textarea { resize: none; }，最简洁，适合项目统一规范 -
单个元素禁用：直接写内联样式
<textarea style="resize: none;"></textarea>，不用怕覆盖，也无需!important -
JS 动态控制：运行时设置
element.style.resize = 'none'或element.setAttribute('style', 'resize: none')，适合表单状态切换场景
注意：resize: none 是 CSS3 属性，所有主流浏览器（包括 Edge 12+、Firefox 4+、Chrome 1+）都支持，但旧版 IE（≤10）完全忽略它——如果真要兼容 IE10 及更早，只能靠 JS 拦截 mousedown 事件并 preventDefault，不过现在基本没必要。
禁用后还要注意什么？
禁用拖拽不是终点，而是新问题的起点：
- 用户无法根据内容长度调整输入区，所以你要主动控制初始
rows和height，或配合 JS 做自动高度伸缩（比如监听input事件 +scrollHeight） - 如果同时设了
max-height但没配overflow: auto，内容溢出会直接被裁掉，看不到滚动条 - 移动端 Safari 对
resize: none支持稳定，但部分 Android WebView（尤其老版本）可能忽略，建议真机测试
最常被忽略的一点：禁用拖拽后，别忘了检查父容器是否因内容变多而意外换行或撑开——固定尺寸的 textarea 往往会让布局更脆弱，而不是更稳。
