appearance: none 在 Firefox 和 Safari 中不生效，是因为旧版浏览器未识别该标准属性：Firefox 85 前需 -moz-appearance: none，Safari 15.4 前仅支持 -webkit-appearance: none。
appearance: none 为什么在 Firefox 和 Safari 里不生效
因为标准 appearance: none 在旧版浏览器中根本没被识别：Firefox -moz-appearance: none；Safari（尤其 15.4 前）压根不解析标准写法，必须用 -webkit-appearance: none。Chromium 系浏览器虽支持标准属性，但对 input[type="number"] 的微调按钮、select 的箭头等仍保留原生 UI。
所以不能只写一行 appearance: none——必须同时声明：
-webkit-appearance: none-moz-appearance: noneappearance: none
Autoprefixer 能帮你自动补前缀，但它不会判断“这个 select 在 Firefox 里加了 -moz-appearance: none 还是残留箭头”，这种逻辑得你手动兜底。
哪些表单元素加了 appearance: none 还得额外处理
剥离外观 ≠ 清空行为和残留 UI。常见必须追加处理的有：
立即学习“前端免费学习笔记（深入）”；
-
input[type="number"]：Chrome 会留上下微调按钮，得加::-webkit-inner-spin-button { appearance: none; }和::-webkit-outer-spin-button { appearance: none; } -
select：箭头消失后点击区域变窄，需配合padding-right留白，并用background-image或::after绘制自定义下拉图标 -
input[type="checkbox"]和input[type="radio"]：视觉清空后只剩空白，必须用opacity: 0或position: absolute; clip: rect(0 0 0 0)隐藏原生控件，再通过label::before+:checked伪类手动画状态 -
textarea：Safari 对appearance: none支持极不稳定，建议统一用-webkit-appearance: none; resize: none;
input[type="date"] 这种特殊控件怎么处理
Safari 和多数 WebView（比如微信内置浏览器）对 input[type="date"] 的 appearance 属性完全无视——连 -webkit-appearance: none 都无效。这不是样式问题，而是 UA 强制接管渲染逻辑。
实际能用的方案只有降级：
- 把
input[type="date"]改成input[type="text"] - 用 JS 日期选择器（如 flatpickr、Pikaday）接管交互
- 保留原生
type="date"仅作 fallback，用@supports (appearance: none)做渐进增强
别试图靠 CSS 强行覆盖，这类控件的 shadow DOM 渲染路径已被锁定，CSS 无权穿透。
兼容性兜底和可访问性怎么平衡
彻底隐藏原生控件（比如 opacity: 0）容易破坏屏幕阅读器支持。更稳妥的做法是：
- 用
position: absolute; clip: rect(0 0 0 0)把原生控件移出可视区，但保留在可访问树中 - 确保自定义图标通过
aria-checked、aria-invalid等属性同步状态 - 所有点击区域必须包裹在
label内，或显式绑定for属性 - 别依赖
accent-color单独控制 checkbox/radio 颜色——它在 Safari 16.4+ 才稳定，在 Firefox 中仍需配合伪元素
最易被忽略的是：即使 appearance 清除了外观，:focus-visible 和 :checked 等伪类依然有效。别以为“看不见”就等于“没状态”，键盘导航和辅助技术全靠这些。
