appearance: none 必须配合-webkit-appearance: none、-moz-appearance: none及显式border/background重置才能跨浏览器清干净，默认样式残留是因前缀缺失或UA属性未覆盖。
appearance 属性是清除表单控件默认样式的最直接手段，但它不是“设了 appearance: none 就完事”，漏掉前缀或残留 UA 样式会导致 Safari 仍显示圆角、Firefox 还有描边、Chrome 按钮背景发灰——这些都不是 bug，是没清干净。
为什么 appearance: none 单独写无效
浏览器的 user-agent 样式表对 button、select、input[type="checkbox"] 等元素设置了多层叠加样式：border、background、box-shadow、-webkit-appearance 全部共存。只写标准 appearance: none，在 Safari 里会被忽略（它只认 -webkit-appearance），在旧版 Firefox 里则完全不生效。
常见错误现象包括：
- Safari 中
select下拉箭头还在，且右侧多出一块灰色区域 - Chrome 里
button点击后仍有浅灰背景残留 - macOS 上
input[type="range"]滑块拖不动或样式错位
必须同时写的四条声明（含前缀）
跨浏览器生效的最小安全配置如下，缺一不可：
button,
input,
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
注意点：
-
-webkit-appearance必须放在最前，否则 Safari 可能跳过后续声明 -
-moz-appearance对 Firefox 80+ 有效，但 79 及更早需额外处理border和background - 仅靠
appearance: none无法清除outline或border，它们得单独设为none或transparent - IE 完全不支持，但 Edge 16+ 已兼容标准写法，无需额外 hack
appearance 清除后，哪些样式必须手动补上
appearance: none 的本质是“交出控制权”，不是“一键变空白”。它只是让浏览器停止用系统控件绘制，之后所有视觉表现都得你来定义：
-
input[type="checkbox"]：清除后勾选图标消失，需用::before或::after重绘，且必须保留:checked和:indeterminate状态样式 -
select：下拉箭头被移除，但右侧空白还在，得用background-image+background-position手动加图标，并设置padding-right避免文字被遮挡 -
button：默认background是initial（非transparent），某些浏览器会回退到canvas色，务必显式写background: transparent -
textarea：清除后可能丢失resize控制，如需保留，得手动加resize: vertical或禁用resize: none
验证是否真正清干净的三个检查点
别信代码写了就 OK，打开 DevTools 逐项确认：
- 在 Elements 面板中选中目标元素，展开 “Computed” 标签页，搜索
appearance，确认值为none（不是auto或button） - 展开 “Styles” 面板，看所有
border、background、box-shadow是否都来自你写的 CSS，而非 “user agent stylesheet” - 在 macOS Safari 和 Windows Chrome 中分别测试鼠标悬停、键盘 Tab 聚焦、空格/回车触发行为，观察是否有意外的高亮、阴影或动画残留
最容易被忽略的是 outline 和 focus-visible 的配合——appearance: none 不影响焦点逻辑，但如果你顺手写了 outline: none 又没补 :focus-visible，键盘用户就彻底迷失了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
