appearance: none需配合-webkit-appearance: none和-moz-appearance: none前缀才生效，且必须设置width/height，否则控件塌缩不可点；复选框无法直接使用::before/::after，须借助label与相邻选择器实现自定义。
appearance: none 能清掉复选框默认样式，但只写这一句，90% 的项目会失效——尤其在 Safari 和旧版 Firefox 里。
为什么写了 appearance: none 还是没变
不是代码错了，是浏览器根本不认。不同引擎对这个属性的前缀要求严格：
-
-webkit-appearance: none是 Safari 和旧 Chrome 的“入场券”，漏了它，iOS 上直接无视 -
-moz-appearance: none对 Firefox 84 及以下版本是必须的；85+ 才支持无前缀的appearance: none - 只写
appearance: none，Safari 16.4 之前版本、Firefox 84 会完全忽略，控件照常显示原生样式 - 写了但没设
width和height：控件视觉消失，点击区域也跟着塌缩，用户点不中
input[type="checkbox"] 不能直接用 ::before/::after
这是个硬限制：复选框是替换元素（replaced element），没有渲染盒，伪元素无处挂载，浏览器静默丢弃。
- 正确做法是把视觉层挪到
label上，用input:checked + label::before或input:checked ~ label::before - 如果
input包在label内，优先用label input:checked + .icon这类结构，更稳定 - 用
display: none隐藏input后，label必须显式绑定（for="id"或包裹），否则点击无效 - 想用 SVG 图标？转成 data URL 塞进
background-image更稳妥，比content: "✓"兼容性好
移动端点击热区太小，opacity: 0 不是万能解
很多人用 opacity: 0 隐藏原生控件，结果发现手指点不准——因为透明控件仍占布局空间，但热区没放大。
- 推荐组合：
position: absolute; clip: rect(0 0 0 0);，既隐藏又保留可访问性（屏幕阅读器仍能读） -
label必须设足够大的padding或min-height，iOS 上至少44px才符合触控规范 - 别忘了加
:focus-visible样式，键盘用户 Tab 到这里时要有明确轮廓，否则 WCAG 2.1 AA 直接不达标 -
accent-color只改打钩颜色，不改形状也不影响尺寸，别指望靠它做完整定制
iOS Safari 对 select 和 date 类控件基本无效
这不是你 CSS 写得不够狠，是 Apple 主动拦截。哪怕把 -webkit-appearance: none 写满三行，下拉箭头、灰底、不可点击文字依然存在。
-
input[type="date"]在 iOS 上最多用::-webkit-datetime-edit微调字体色，其他样式几乎无效 - 真要统一外观，得走“隐藏 + 模拟”路线：
visibility: hidden原生控件，外层套div[role="combobox"]，再手动实现键盘导航（Space/ArrowDown）和aria-expanded状态同步 - 别用
all: unset替代appearance: none——它会把display、role全干掉，控件直接从 DOM 可访问性树里消失
最麻烦的不是怎么画勾，而是让勾和真实状态严丝合缝；一个没处理好的兄弟选择器或没补全的前缀，就足以让整个自定义逻辑在某个机型上彻底失灵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
