appearance: none 是自定义 checkbox/radio 样式的必要前提，需配合 -webkit-appearance: none 和 -moz-appearance: none；伪元素必须作用于 label 等外部元素，不可直接用于 input；隐藏原生控件应使用 clip + absolute 而非 opacity: 0 以保障可访问性。
直接给 input[type="checkbox"] 或 input[type="radio"] 写 background、border 基本无效——浏览器对它们做了原子级渲染，样式被锁死。必须先解除限制，再重建视觉层。
为什么 appearance: none 是必须的第一步
不加 appearance: none，后续所有自定义都大概率失效，尤其在 Safari 和旧版 Chrome 中。但只写这一句远远不够：
-
-webkit-appearance: none必须显式加上，Safari 15.4 之前不支持标准属性，仅靠appearance: none无法移除原生圆点/方框 -
-moz-appearance: none对 Firefox 84 及更早版本是刚需，否则伪元素会和原生控件“叠在一起” - 移除后控件尺寸塌缩为 0×0，立刻补
width和height（如18px），否则点击区域消失 - 如果用了 Bootstrap 或重置 CSS 库，检查是否被覆盖——临时加
!important验证是否生效
为什么 ::before/::after 不能直接用在 input 上
input[type="checkbox"] 和 input[type="radio"] 是替换元素，没有渲染盒，::before/::after 无处附着，浏览器静默忽略。你写的伪元素根本不会出现。
- 正确做法：把视觉层移到
label或兄弟元素上，用状态选择器联动 - 结构推荐：
<input type="checkbox" id="agree"><label for="agree">我同意</label> - 选中样式绑定写法：
input:checked + label::before（相邻兄弟）或input:checked ~ label::before（通用兄弟，中间不能插非label元素） - 若
input被display: none隐藏，label必须用for属性或包裹方式显式绑定，否则点击失效
隐藏原生控件时最容易踩的坑
用 opacity: 0 看似简单，但会破坏可访问性——屏幕阅读器可能跳过它，键盘焦点也常丢失。更稳妥的方式是物理移出视口但保留功能：
- 推荐方案：
position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; - 避免用
visibility: hidden或display: none单独作用于input，除非你同步处理了label的绑定逻辑 - 暗色模式下，别只改
background-color，记得同步设置accent-color（仅控制高亮色，兼容性有限，Chrome 93+/Firefox 103+ 支持） - 禁用态（
:disabled）需单独定义，否则自定义样式在input:disabled + label下可能不响应
真正难的不是画个勾或圆点，而是让那个“看不见的 input”始终和视觉反馈严丝合缝——结构、选择器顺序、可访问性保障，三者缺一不可。稍有错位，用户就点不中、读不出、Tab 不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
