要使 checkbox 样式生效，必须先用 -webkit-appearance: none、-moz-appearance: none 和 appearance: none 三者写全以卸载原生外观；再用 position: absolute; clip: rect(0, 0, 0, 0) 隐藏控件以保可访问性；结构须为 input + label 紧邻，伪元素需显式设 content: "" 和 display: inline-block；深色模式需媒体查询单独控制颜色。
为什么直接写 input[type="checkbox"] 样式总失效
不是你 CSS 写错了，是浏览器主动拦着：Chrome、Safari、Firefox 默认把 checkbox 渲染为系统原生控件，width、height、background 大部分被忽略。只有先“卸载”它的原生外观，才能真正接管样式。
必须同时写全三个 appearance 前缀
漏掉任一前缀，就可能在某个浏览器里回退到丑陋原生样式：
-
-webkit-appearance: none—— Chrome、Edge、Safari 必须 -
-moz-appearance: none—— Firefox 必须（87+ 稳定，但旧版仍需） -
appearance: none—— 现代标准，但 Safari 15.4 之前不支持，不能单独用
三者缺一不可，且顺序无关。只写 appearance: none 在 Safari 15.2 或 Firefox 86 下会静默失效。
隐藏原生控件的两种方式，选哪个取决于兼容性需求
现代项目推荐用 position: absolute; clip: rect(0, 0, 0, 0)，原因如下：
-
display: none会让控件完全脱离可访问性树，屏幕阅读器读不到，label关联点击也失效 -
opacity: 0+pointer-events: none表面隐藏但键盘Tab仍能聚焦，容易引发焦点丢失或跳转异常 -
clip: rect()方式既保留语义和焦点能力，又彻底视觉隐藏，是 WCAG 推荐做法
示例写法：input[type="checkbox"] { position: absolute; clip: rect(0, 0, 0, 0); }
用 :checked + label::before 而不是 :checked ~ label
结构必须严格为：<input type="checkbox" id="x"><label for="x">文字</label>，中间不能有空格、换行或注释节点。否则选择器不匹配。
-
:checked + label是紧邻兄弟选择器，精准控制目标 label -
:checked ~ label会匹配所有后续同级 label，表单字段密集时极易误触（比如多个 checkbox 共用一个容器） - 若用 class 区分类型，如
.custom-checkbox，应写成.custom-checkbox:checked + .custom-checkbox-label，避免全局污染
未选中态的 label::before 必须显式声明 content: "" 和 display: inline-block，否则伪元素压根不渲染——这是调试时最常卡住的点。
深色模式下，别依赖 accent-color 统一 checkbox 颜色：它只影响勾选标记和背景，不响应系统主题切换，也不作用于自定义伪元素；真要适配，得用 @media (prefers-color-scheme: dark) 单独设 background-color 和 border-color。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
