不能美化textarea大小调整手柄，只能用resize: none禁用它；::resizer伪元素仅支持极有限的视觉微调（如背景色、透明度），无法隐藏、替换或重绘其形状，且在chrome/firefox中多数被忽略。
不能美化 textarea 的大小调整手柄——只能禁用它，或接受浏览器原生样式。 resize 手柄是浏览器 UI 组件，不是标准可样式化的元素；所谓“美化”在 CSS 层面没有实现路径，::resizer 伪元素仅支持极有限的视觉微调（如背景色、透明度），且无法隐藏、替换或重绘其形状。
为什么 ::resizer 无法真正美化手柄
浏览器对 ::resizer 的支持极其保守：它只读、不可交互、不响应 display: none 或 visibility: hidden。试图写 textarea::resizer { background: red; } 在部分 Safari 版本中可能生效，但在 Chrome/Firefox 中多数被忽略。更关键的是，它的尺寸、位置、鼠标反馈均由 UA 样式硬编码，CSS 无权接管。
-
textarea::resizer { width: 12px; height: 12px; }—— 无效，会被浏览器丢弃 -
textarea::resizer { display: none; }—— 完全无效，手柄照常显示并可拖拽 - 即使加上
!important，也无法突破该伪元素的只读限制
resize: none 是唯一可靠方案
如果你的目标是“让手柄不干扰布局或视觉一致性”，resize: none 是直接、跨浏览器、零兼容性风险的解法。它同时移除交互行为和视觉呈现，比任何“美化”尝试都更干净。
- 必须作用于
textarea元素本身，不能只写在父容器上 - 若使用了 Bootstrap、Tailwind 等框架，需检查是否有更高优先级的选择器覆盖了你的规则（例如
.form-control可能设了resize: vertical） - 避免和
rows/cols混用：二者冲突时，浏览器渲染行为不一致；优先用height/width+max-height/max-width锁定尺寸
移动端和旧环境的现实情况
iOS Safari 支持 resize 属性但默认禁用拖拽（resize: none 依然有效）；Android WebView（尤其 4.x–6.x）常忽略该属性，表现为手柄不出现或拖拽无响应。IE ≤10 完全不识别。这些不是 bug，而是规范未强制要求的行为。
- 真机测试比 DevTools 模拟器更可信，特别是 Android 低版本
- 如果项目仍需兼容 IE10 或旧 WebView，
resize: none会静默失效——此时应配合 JS 检测并降级（例如监听mousedown并preventDefault），但代价是失去原生拖拽手感 - 别指望用
overflow: hidden裁掉手柄：它只是把把手藏起来，用户拖拽时仍会改变textarea尺寸，造成布局跳动
真正容易被忽略的是：手柄虽小，但它参与盒模型计算——当设置了 min-width 或弹性容器中存在 flex-shrink 时，浏览器可能为保留 resize 区域而压缩内容区。禁用 resize 后，尺寸控制才真正回归你写的 CSS 规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
