resize: none 是禁用 textarea 拖拽缩放最直接有效的方式，但必须配合 overflow: auto 或 hidden 才生效，因 css 规范要求 resize 仅在 overflow 非 visible 时起作用；默认 overflow: visible 会导致该样式被忽略。
textarea 怎么禁用拖拽缩放
默认情况下，<textarea></textarea> 右下角有个可拖拽的缩放手柄，用户一拉就变形，破坏布局或响应式效果。这不是 bug，是浏览器原生行为，但能关掉。
关键不是写 JS 监听，而是用 CSS 精准压制：
-
resize: none;是最直接有效的声明，加在textarea的样式里即可 - 如果用了框架（如 React/Vue），直接写在内联 style 或 class 中都行，例如：
style="resize: none;" - 注意：该属性对
<input type="text">无效——它本来就不能拖拽，只作用于textarea和某些div[contenteditable]
input[type="text"] 为什么加 resize 没反应
因为 resize CSS 属性仅适用于「可调整尺寸的替换元素」，而普通 input 不在此列。它的宽高由 width/height 或 size 属性控制，用户无法拖拽改变大小。
如果你发现某个 input 能被拖拽，大概率是它被错误地套在了 display: block; + resize: both; 的父容器里，或者用了自定义的可编辑 div 模拟输入框。检查真实 DOM 结构比盲目加 resize: none 更有效。
禁用 resize 后还要防止用户手动改宽高怎么办
单纯 CSS 禁用拖拽，不等于阻止用户通过 DevTools 或 JS 动态修改 style.width。真要强约束，得配合：
- 用
min-width/max-width固定宽度区间（例如：min-width: 200px; max-width: 200px;） - 避免用
!important硬顶，优先用更具体的选择器，比如textarea.form-input - 如果项目用 Tailwind，对应类是
resize-none，但它底层仍是resize: none
移动端 Safari 上 resize: none 不生效？
老版本 iOS Safari（≤14.5）确实存在兼容性问题，resize: none 有时被忽略。临时解法是加一条 hack：
textarea {
resize: none;
/* iOS Safari fallback */
-webkit-appearance: none;
}
注意：-webkit-appearance: none 本身不直接禁拖拽，但它会剥离原生控件样式，间接让 resize 手柄消失。别乱加 overflow: hidden，那可能截断滚动内容。
真正麻烦的是混合场景：比如 textarea 在 modal 里、又用了 transform 缩放，这时 resize 手柄可能错位或残留。这种时候得靠视觉隐藏（background: linear-gradient(...) 盖住右下角），而不是指望单一 CSS 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
