:checked伪类无法直接定制复选框外观，因浏览器限制其仅支持opacity等非布局属性；需隐藏原生控件并用兄弟选择器（~或+）联动自定义元素实现视觉反馈。
为什么 :checked 本身不能直接控制复选框外观
:checked 伪类确实能匹配已勾选的 元素，但它对原生复选框的样式控制极其有限——浏览器强制屏蔽大部分 CSS 属性（如 background、border-radius、width 等），仅允许修改 opacity 或 visibility 这类不影响布局的属性。
真正可定制的方案是「隐藏原生控件 + 用其他元素模拟视觉状态」，而兄弟选择器（~ 或 +）就是触发这个模拟的关键链路。
必须用 label 包裹或显式绑定 for 属性
兄弟选择器生效的前提是：复选框和要控制的元素必须在**同一父容器内**，且复选框在 DOM 中位于目标元素**之前**。否则 input:checked ~ .custom-style 根本不会匹配。
常见错误写法：
立即学习“前端免费学习笔记（深入）”；
✓
正确结构要点：
-
和目标元素（如或）必须同级，且在前 - 用
关联，或直接把套进内（推荐后者，更健壮） - 给
加position: absolute; opacity: 0;隐藏但保留可交互性
~ 和 + 的选择逻辑差异
+（相邻兄弟）只匹配紧跟在 后面的**第一个**同级元素；~（通用兄弟）匹配后面**所有**符合条件的同级元素。实际中更常用 ~，因为视觉反馈元素往往不紧邻输入框（比如中间隔了文字或图标）。
示例（有效）：
input:checked ~ .fake-checkbox {
background-color: #4CAF50;
}
如果把 .fake-checkbox 放到 前面，或者换用 + 却中间有文本节点，样式就失效。
移动端点击区域与可访问性容易被忽略
隐藏原生 后，若没处理好点击区域，iOS 或 Android 上可能点不中、响应延迟，甚至屏幕阅读器无法识别状态变化。
必须做的几件事：
-
必须包裹整个可点击区域（不要只包文字） - 给
.fake-checkbox设置足够大的min-width/min-height（至少 44px × 44px 符合移动端触控标准） - 添加
cursor: pointer;和user-select: none;防止误选 - 用
aria-checked手动同步状态（input:checked ~ .fake-checkbox规则里加aria-checked="true"不行，得靠 JS 监听并设置）
纯 CSS 方案做不到完整可访问性，关键业务场景建议用 role="checkbox" + JS 控制，而不是强依赖 :checked ~ 链式样式。
