appearance: none 不是银弹，必须搭配前缀、重置和兜底才能真正跨系统生效；因macOS Safari（尤其15.4前）仅支持-webkit-appearance: none，Windows Firefox则需-moz-appearance: none且旧版对select/checkbox支持有限。
appearance: none 不是银弹，必须搭配前缀、重置和兜底才能真正跨系统生效。
为什么 appearance: none 在 macOS Safari 和 Windows Firefox 上表现不同
macOS Safari（尤其 15.4 之前）只认 -webkit-appearance: none；Windows Firefox（select 和 input[type="checkbox"] 的 -moz-appearance: none 支持有限，甚至完全忽略。Chrome/Edge（Chromium）虽支持标准 appearance: none，但对 input[type="number"] 的微调按钮仍需额外清除。
- 别只写
appearance: none—— 必须同时声明-webkit-appearance: none和-moz-appearance: none - Firefox select 即使加了
-moz-appearance: none仍可能残留箭头，得用background: transparent+ 自定义::after覆盖 - Safari 对
input[type="date"]基本无视appearance，连-webkit-appearance: none都无效，只能降级为input[type="text"]+ JS 日期选择器
哪些表单元素加了 appearance: none 还得额外处理
剥离原生外观后，很多控件的“内部 UI”仍残留，仅靠 appearance: none 并不能清空它们的盒模型干扰。
-
input[type="number"]：Chrome 会保留上下微调按钮，必须加::-webkit-inner-spin-button { appearance: none; }和::-webkit-outer-spin-button { appearance: none; } -
select：下拉箭头消失后，点击区域变窄，需用padding-right留白，并配合 wrapper 容器或background-image绘制自定义箭头 -
input[type="checkbox"]和input[type="radio"]：视觉清空后完全空白，必须用position: absolute; opacity: 0隐藏原生控件，再通过label::before或label::after绘制状态图标，并绑定:checked和:disabled -
textarea：Safari 对appearance: none支持不稳定，建议统一用-webkit-appearance: none; resize: none;组合
Autoprefixer 能自动补前缀，但不能解决逻辑问题
Autoprefixer 可以把 appearance: none 编译成 -webkit-appearance: none、-moz-appearance: none、appearance: none，但它不处理：
- 各浏览器对同一属性的实际支持程度差异（比如 Firefox select 的
-moz-appearance无效） - 伪元素选择器兼容性（
::-webkit-inner-spin-button在 Firefox 中无意义） - 移动端 WebView 行为（如微信内置浏览器强制重绘
input[type="date"]，appearance完全被忽略） - 可访问性缺失（
appearance: none后:focus样式必须显式定义，否则键盘用户无法识别焦点位置）
最常被忽略的一点是：appearance 剥离的是外观，不是语义和交互逻辑。你删掉了箭头，但没补上点击反馈；隐藏了复选框，却忘了让屏幕阅读器仍能感知状态变化。这些不是样式问题，而是控制权移交后的责任转移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
