appearance: none 必须按 -webkit-appearance: none、-moz-appearance: none、appearance: none 顺序书写，缺一导致 safari/firefox 回退原生样式；它不重置 border/background 等，需显式清零；safari 15.6–16.4 中 :focus-visible 与 appearance 冲突，需 @supports 兜底；select/checkbox 更脆弱，推荐 label + opacity: 0 + 伪元素替代方案。
appearance: none 必须写全前缀链，不能只靠 autoprefixer
autoprefixer 默认不处理 appearance，即使你配了 browserslist，它也不会自动补 -webkit-appearance 或 -moz-appearance。你得手动启用插件或硬编码。
正确顺序必须是：
-
-webkit-appearance: none（放最前，覆盖 Safari/Chrome 旧版） -
-moz-appearance: none（紧跟其后，兼容 Firefox ≤88） -
appearance: none（最后，现代标准写法）
漏掉任意一项，Safari 15.3 或 Firefox 87 就会回退到原生按钮样式——圆角、阴影、内边距全回来，不是“没生效”，而是“被忽略后走默认逻辑”。
appearance: none 不等于样式清零，border/background 必须显式重置
appearance: none 只是交出外观控制权，不重置任何视觉属性。各浏览器对 <button></button> 的默认值差异极大：
- Safari 默认有
border: 1px solid和background-color: -webkit-focus-ring-color - Firefox 默认带浅灰背景和粗 padding
- Chrome 在某些版本里保留
line-height: normal，导致文字上下留白异常
所以重置类至少要包含：
border: nonebackground: transparent-
padding: 0和margin: 0 -
line-height: 1（防 Safari 文字错位） -
font: inherit（避免字体继承中断）
:focus-visible 在 Safari 15.6–16.4 中与 appearance 冲突
当你用 appearance: none 清除原生焦点环后，Safari 这几个版本会同时弱化 :focus-visible 的触发逻辑——键盘聚焦时它不生效，但 :focus 还在。
不能退回 :focus（破坏无障碍），稳妥做法是加一层条件判断：
@supports (-webkit-appearance: none) {
button:focus:not(:focus-visible) + button:focus-visible {
outline: 2px solid #007bff;
}
}
这不是 hack，而是 Safari 官方已知 bug（2026 年 7 月仍存在）。别指望它自动修复，得主动兜底。
select 和 checkbox 等控件的 appearance 处理更脆弱
<select></select> 和 <input type="checkbox"> 的 appearance 行为比 button 更不可靠：
- IE 和旧版 Edge 完全不支持
appearance，select::-ms-expand是唯一能隐藏箭头的方式 - Firefox 对
checkbox的-moz-appearance: none支持不稳定，常需配合opacity: 0+label模拟 -
select加了appearance: none后，Safari 仍可能保留内部 padding，得额外设padding-inline-end: 0
真正跨浏览器稳定的方案，往往是放弃纯 CSS，改用 label 包裹 + opacity: 0 + 自定义伪元素，而不是死磕 appearance。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
