input[type="checkbox"]无法直接用CSS改外观，因其原生渲染硬编码且不可绘制；需用input:checked + label结构，通过label伪元素实现自定义样式，并兼顾可访问性与移动端适配。
为什么 input[type="checkbox"] 不能直接用 CSS 改外观
浏览器对原生 <input type="checkbox"> 的渲染是硬编码的，appearance: none 虽能隐藏默认样式，但会同时清空焦点、可访问性状态和部分交互反馈（比如 iOS 上点击无响应）。直接在 input 上写 background 或 border 完全无效——它根本不是可绘制的元素。
所以必须借助相邻兄弟选择器 input:checked + label，把视觉表现“嫁接”到紧随其后的 label 上。前提是 HTML 结构严格满足：同级、input 在前、label 紧跟其后，且 label 不带 for 属性（否则会干扰事件冒泡）。
input:checked + label 的结构约束和常见失效原因
这个组合器生效的前提非常具体：
-
input和label必须是同级元素，且label紧跟在input后面（中间不能有其他标签或文本节点） -
input必须有type="checkbox"，且不能被display: none或visibility: hidden隐藏——推荐用position: absolute; left: -9999px移出视口，保留可访问性和键盘焦点 -
label内不能嵌套另一个input，否则点击时事件可能被拦截 - 如果用了 Vue/React 等框架，确保没有因条件渲染导致 DOM 顺序错乱（比如
v-if把label提前了）
典型错误现象：label 样式始终不变，控制台无报错，但勾选后 input.checked 为 true——大概率是结构不满足相邻兄弟关系。
用 label::before 绘制自定义方框并同步状态
最稳定的做法是让 label 承担容器角色，用伪元素 ::before 画勾选框，::after 画对勾。关键点在于状态同步完全依赖 CSS，不碰 JS：
input[type="checkbox"] {
position: absolute;
left: -9999px;
}
input:checked + label::before {
background-color: #007bff;
border-color: #007bff;
}
input:checked + label::after {
opacity: 1;
transform: scale(1);
}
label::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin-right: 8px;
vertical-align: middle;
border: 2px solid #adb5bd;
background-color: #fff;
}
label::after {
content: "✓";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
font-size: 12px;
color: white;
transition: all 0.15s ease;
}
注意：label::after 必须设 position: absolute 并相对于 label（需加 position: relative）定位；transform: scale(0) 比 display: none 更利于过渡动画。
无障碍与移动端适配的硬性要求
光好看不够，用户得能用、屏幕阅读器得能读、手指点了要有反馈：
- 必须保留
input的id和label的for属性（即使用了相邻选择器），否则 VoiceOver/NVDA 无法关联控件与说明文字 -
label的点击热区至少要 44×44px（iOS 最小触控尺寸），可通过padding扩展，但不要只扩::before - 添加
:focus-within样式给label，让键盘用户看到焦点环：label:focus-within::before { outline: 2px solid #007bff; outline-offset: 2px; } - 避免在
label上写user-select: none，否则 Safari 下双击可能误触发文本选择
真正难的不是画个好看的方框，而是让所有人在所有设备上都点得准、看得清、读得懂——这些细节一旦漏掉，样式再炫也没法上线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
