Safari 15.3 及更早版本不支持 appearance: none，仅识别 -webkit-appearance: none；Firefox 88 及更早版本仅支持 -moz-appearance: none；Chrome 中 appearance: none 对 number 输入框的微调按钮无效，需额外清除伪元素；iOS Safari 对 select、audio、date 等元素禁用 appearance 控制。
appearance: none 为什么在 Safari 15.3 及更早版本完全不生效
因为 Safari 15.3 及更早版本压根不识别标准属性 appearance: none，只认 -webkit-appearance: none。这不是兼容性“差”，而是标准支持尚未落地——它根本没把这个属性纳入解析流程。
常见错误是只写 appearance: none，结果在真机 Safari 上原生箭头/圆角/阴影纹丝不动。必须把 -webkit-appearance: none 放在最前面，且不能省略。
-
-webkit-appearance: none是 Safari（含 iOS）的刚需前缀，尤其对button、select、input[type="number"] - 即使写了
-webkit-appearance: none，若没同步设width和height，控件会塌缩为 0×0，点击区域消失 - Safari 15.4+ 才开始支持无前缀写法，但旧版存量设备（如 iOS 15.x）仍广泛存在
Firefox 88 及更早版本忽略 appearance: none 的真实原因
Firefox 在 89 版才启用标准 appearance 属性，88 及更早版本只响应 -moz-appearance: none。漏掉这一句，select 或 checkbox 就会和你画的伪元素叠在一起，视觉错乱。
更麻烦的是：-moz-appearance: none 对 select 元素支持极弱——加了也大概率残留箭头，此时得靠 background: transparent + 自定义 ::after 覆盖，而非指望它清干净。
立即学习“前端免费学习笔记（深入）”；
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须三行都写：
-webkit-appearance: none、-moz-appearance: none、appearance: none - Autoprefixer 默认不处理
appearance，需手动开启插件并配置 browserslist - Firefox 下
input[type="checkbox"]加了-moz-appearance: none后，仍需用position: absolute隐藏原生控件，否则可访问性受损
Chrome 中 appearance: none 看似生效，实则残留微调按钮
appearance: none 对 input[type="number"] 只作用于外层容器，Chrome 的上下微调按钮（spin buttons）是独立伪元素，不受影响。你看到的“已重置”只是假象。
必须额外清除两个伪元素：::-webkit-inner-spin-button 和 ::-webkit-outer-spin-button，否则它们会挤占宽度、干扰 padding 对齐，甚至在 focus 时突然闪现。
- 仅对
input[type="number"]生效，input[type="range"]需单独处理::-webkit-slider-thumb -
::-webkit-inner-spin-button { appearance: none; }必须显式写，不能依赖父级继承 - 清除后记得补
padding-right，否则右侧文字会被裁切
iOS 下 appearance: none 完全无效的底层限制
iOS Safari 根本不给 audio、select（展开态）、input[type="date"] 开放 appearance 控制权。这不是 bug，是 WebKit 的硬编码策略：这些元素的 UI 由 UIKit 原生组件驱动，CSS 层被刻意隔离。
比如 select 收起时能去掉箭头，但展开弹出的 Picker 背景色（黑底蒙层）你改不了任何 CSS——background、box-shadow、伪元素全无效。这是平台级限制，不是写法问题。
-
audio元素加appearance: none没有任何效果，必须用opacity: 0+ 自定义控件覆盖 -
input[type="date"]在 iOS 上无视所有appearance声明，降级为input[type="text"]+ JS 日期选择器是唯一可靠方案 - 试图用
:focus-visible补焦点环？Safari 15.6–16.4 存在 bug：一旦用了appearance: none，:focus-visible就不再触发
select 加了 appearance: none，宽度突然少了 8px，不是你写错了，是 Safari 原生箭头占的空间被释放了。这时候靠硬调 width 不稳定，用 padding-right 预留空间才是正解。 
