直接给 input[type="checkbox"] 写 background 无效，因其是替换元素，仅 width、height 等极少数样式生效；需用 appearance: none（配全三端前缀）+ label 伪元素实现自定义样式。
为什么直接给 input[type="checkbox"] 写 background 没用？
浏览器把原生复选框当作“替换元素”，内部渲染逻辑被锁死，background、border、color 等常规样式基本被忽略。你写的样式可能在 DevTools 里显示生效，但页面上完全不体现——这不是你的 CSS 写错了，是它根本没被应用。
真正起作用的只有极少数属性：width、height、opacity（但慎用）、visibility（同样慎用）。其他视觉控制必须绕过 input 本身。
appearance: none 必须配齐三端前缀
只写 appearance: none 在 Safari 15.4 之前和 Firefox 84 及更早版本里大概率失效。必须显式补全：
-
-webkit-appearance: none（Safari / Chrome） -
-moz-appearance: none（Firefox） -
appearance: none（现代标准）
移除后控件尺寸会塌缩为 0×0，立刻补上 width 和 height（比如 18px），否则点击区域消失。若用了 Bootstrap 或 Normalize.css，检查是否被重置——临时加 !important 验证是否覆盖。
伪元素必须挂在 label 上，不能写在 input 上
input[type="checkbox"] 没有渲染盒，::before/::after 无处附着，浏览器静默忽略。你写的伪元素根本不会出现。
正确结构必须是：
<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
opacity: 0 看似简单，但会破坏可访问性：屏幕阅读器可能跳过它，键盘 Tab 焦点常丢失，部分辅助技术无法识别其状态。
更稳妥的物理移出方案：
input[type="checkbox"] {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
}
禁用态 :disabled 需单独定义，否则 input:disabled + label::before 下自定义样式可能不响应；暗色模式下，除了 background-color，记得同步设 accent-color（仅控制高亮色，Chrome 93+/Firefox 103+ 支持）。
真正难的不是画个勾，而是让那个“看不着”的控件，在所有交互路径下都保持功能完整、语义准确、焦点可用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
