resize: none 是禁用 textarea 右下角调整手柄的最直接有效方案，它同时移除拖拽行为和视觉手柄，被所有现代浏览器支持，且无需 javascript；其他如 resize: vertical 仍保留手柄，::resizer 伪元素无法隐藏手柄，ie 不支持该属性而旧版 safari 可能忽略，移动端默认禁用。
textarea 的 resize: none 是最直接有效的方案
禁用文本域右下角大小调整手柄，resize: none 就是标准解法，它会同时移除拖拽行为和视觉手柄。几乎所有现代浏览器（Chrome、Firefox、Safari、Edge）都支持，且无需 JavaScript 干预。
常见错误是只写 resize: vertical 或 resize: horizontal —— 这类值仍保留手柄，只是限制方向，用户依然能拖；而 resize: none 才真正禁用。
- 必须作用于
textarea元素本身，不能只写在父容器上 - 内联样式、class 类选择器、标签选择器均可生效，例如：
<textarea style="resize: none;"></textarea> - 如果已有其他 CSS 规则设置了
resize（比如重置库或框架），需确保该规则优先级足够高，或使用!important覆盖（不推荐，应优先调整选择器特异性）
::resizer 伪元素无法隐藏手柄，仅用于自定义样式
::resizer 是一个只读伪元素，浏览器不支持通过它来隐藏或移除手柄——它仅允许有限的样式覆盖（如背景色、尺寸、透明度），但不能改变其存在性或交互行为。
试图用 textarea::resizer { display: none; } 或 visibility: hidden; 完全无效，这类写法会被浏览器忽略。目前没有标准 CSS 方式能“替换”或“删除”这个伪元素。
-
::resizer在 Firefox 中支持度最好，Chrome 和 Safari 支持有限，Edge 基本不响应样式 - 即使设了
opacity: 0，手柄区域仍占据空间且可触发拖拽，只是看不见而已 - 不要把它当作
resize: none的替代方案，二者定位完全不同：一个是控制行为，一个是微调外观
兼容性与降级处理要注意 IE 和旧版 Safari
resize 属性是 CSS3 特性，IE 全系列（包括 IE11）完全不支持，所以对 IE 用户来说，textarea 本来就没有手柄，也无需禁用；但旧版 Safari（≤ 5.1）可能忽略 resize: none。
- 若需强兼容旧环境，可配合 JavaScript 检测并 fallback：
if ('resize' in document.documentElement.style) { /* 应用 CSS */ } - 移动端（iOS Safari）默认禁用
resize行为，即使写了resize: both也基本不可拖，所以none在移动侧属于“冗余但安全”的写法 - 不要依赖
::resizer做兼容性兜底，它在多数旧浏览器中根本不存在
为什么不用 JavaScript 监听拖拽事件来阻止？
有人尝试监听 mousedown 或 dragstart 并调用 preventDefault()，但这条路走不通：浏览器对 textarea 手柄的拖拽是原生 UI 行为，不触发标准 DOM 事件，JS 无法拦截。
-
resize属性是唯一被规范支持的控制方式 - 试图用
pointer-events: none会连输入都禁掉，得不偿失 - 动态修改
style.resize属性（如el.style.resize = 'none'）和静态 CSS 效果一致，适合需要运行时切换的场景
实际效果取决于是否写对了目标元素和属性值，而不是加了多少层封装或用了多少种伪类。手柄消失与否，就看那一行 resize: none 有没有真正应用到 textarea 上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
