appearance属性在Chrome/Safari中支持较好，Firefox直到v89才部分支持且对select/checkbox有限制；需配合厂商前缀、重置默认边距、保障可访问性并处理浏览器特有渲染问题。
appearance属性在Chrome/Firefox/Safari中的支持差异
appearance 是控制表单控件原生外观的核心CSS属性，但它在各浏览器中的行为并不一致。Chrome 和 Safari 支持 appearance: none 重置按钮、输入框、下拉框等，但 Firefox 直到 v89 才开始部分支持，且对 select、checkbox 等仍有限制。
常见错误现象：appearance: none 在 Firefox 中对 select 无效，导致下拉箭头残留；Safari 对 input[type="number"] 的上下微调按钮无法完全隐藏，仅加 appearance: none 不够。
- 必须配合厂商前缀：
-webkit-appearance: none（Chrome/Safari）、-moz-appearance: none（Firefox，仅部分元素有效） - Firefox 中
select需额外用background: transparent+ 自定义::after箭头覆盖 - Safari 下
input[type="number"]还需加::-webkit-inner-spin-button { appearance: none }
重置表单控件前必须处理的默认边距与尺寸不一致问题
即使清除了原生外观，input、button、select 在不同浏览器中仍有隐式 padding、border、line-height 差异。例如 Chrome 给 input[type="search"] 加了左右 padding，而 Firefox 默认为 0。
实操建议直接使用「重置组合拳」，避免逐个调试：
立即学习“前端免费学习笔记（深入）”；
- 统一设置
box-sizing: border-box，防止宽高计算偏差 - 显式声明
padding: 0.375em 0.75em（而非依赖浏览器默认），推荐用相对单位适配缩放 - 对
button和input[type="submit"]必须重置cursor: pointer，否则 Safari 可能显示文本光标 - Firefox 对
textarea的resize行为默认启用，需加resize: none才真正统一
select下拉框重置后如何保持可访问性
单纯用 appearance: none 隐藏原生箭头，再用 background-image 或伪元素画一个新箭头，很容易破坏屏幕阅读器识别或键盘导航（如按空格/Alt+↓ 展开）。这不是样式问题，而是语义断裂。
关键点在于：视觉重置 ≠ 语义移除。原生 select 的 ARIA 能力（如 role="combobox"、aria-expanded）仍需保留。
- 不要替换为
div+ JS 模拟，除非你完整实现 keyboard navigation（↑↓PageUp/PageDown/Escape）和 focus 管理 - 用
background: url("data:image/svg...") no-repeat right 0.5em center / 1em替换箭头，比伪元素更稳定兼容 - 必须保留
select标签本身，且确保option子元素未被 JS 动态移除或禁用 - 测试方式：用 Tab 切入，按空格应展开，方向键应切换选项 —— 若失败，说明重置过度
appearance: none 后 checkbox/radio 的状态样式怎么写
appearance: none 会让 input[type="checkbox"] 和 input[type="radio"] 完全不可见，此时必须用 ::before 或 ::after 重建视觉反馈，且要响应 :checked、:disabled、:focus 等状态。
容易踩的坑是只写 :checked::before，却忽略 :disabled:checked 的灰阶样式，或忘记 :focus 的 outline（影响键盘用户）。
- 推荐用
input[type="checkbox"]::before绘制方框，:checked::before用 background 或 SVG 勾选图标 - Firefox 对
input[type="radio"]::before的border-radius: 50%渲染偏移，需加top: 2px; left: 2px微调 - 所有自定义状态样式必须包含
pointer-events: none，否则会拦截点击事件 - 不要用
visibility: hidden隐藏原生控件 —— 应该用position: absolute; opacity: 0; width: 1px; height: 1px;保留在可访问流中
appearance: none 触发了渲染层崩溃，或者某次 Chrome 更新后 input[type="date"] 的内部 shadow DOM 结构变化导致伪元素失效。这些边界情况往往只在真实设备上暴露，光靠 CanIUse 查支持度不够。 
