resize: none是唯一真正禁用textarea拖拽的方式，但必须显式设置overflow为auto或hidden且样式作用于真实textarea元素，否则因webkit内核限制或优先级覆盖而失效。
Chrome / Safari 下能用 ::-webkit-resizer 精细控制，Firefox 则基本不可控——它既不支持该伪元素，也不响应 resize: horizontal 的全宽拖拽行为，只能退回到右下角小区域或放弃拖拽。
怎么隐藏 textarea 右下角三斜线（::-webkit-resizer）
这个“三斜线”不是装饰图标，而是 WebKit 内核对 resize 行为的视觉反馈，只要元素有 resize 且 overflow 不是 visible，它就存在。隐藏它最稳妥的方式是：
- 给
textarea设置resize: none（直接禁用拉伸能力） - 或保留拉伸但隐藏控件：
textarea::-webkit-resizer { background-color: transparent; } - 避免用
width: 0或height: 0——某些旧版 Safari 会因此触发渲染异常，导致父容器高度塌陷
为什么 Chrome 里能拉整条边，Firefox 却只能拖右下角？
因为 Chrome 把 resize 拖拽区和 ::-webkit-scrollbar 共享同一套底层机制。你调大 ::-webkit-scrollbar 的 width，就能把水平拉伸区域撑满整个右侧；而 Firefox 根本不解析 ::-webkit-scrollbar，也不扩展 resize 区域，只认默认右下角那块。
- Chrome 示例：
.resize-bar { resize: horizontal; overflow: scroll; } .resize-bar::-webkit-scrollbar { width: 120px; }→ 右侧整条可拖 - Firefox 下这段 CSS 完全无效，
@supports (-moz-appearance: none)可用来做降级判断 - 不要试图用
transform: scale()放大右下角——会破坏布局流，且在高 DPI 屏幕上缩放失真
Bootstrap 模态框里 textarea 拉伸失效，真是 resize: none 没起作用？
不是。失效往往是因为父容器（如 .modal-body）设置了 overflow: auto，导致你看到的“拉伸”其实是父容器滚动条在动，textarea 本身根本没变尺寸。
- 检查是否同时设了
rows和height——二者冲突时，Chrome 和 Firefox 渲染优先级不同 - 给
textarea加flex-shrink: 0防止被弹性父容器压缩 - 把
.modal-body的overflow改成visible或unset，再试
真正麻烦的从来不是怎么让它动，而是怎么让它在所有浏览器里“动得一致”。Firefox 的限制是硬伤，别硬刚——该用预设宽度切换就切换，该加文字提示就加，比 JS 模拟拖拽更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
