原生 checkbox 不能直接用 CSS 改样式，因其渲染由浏览器硬编码；需保留原生 input 并用伪元素覆盖视觉层，同时确保可访问性、焦点管理与状态同步。
为什么原生 <input type="checkbox"> 不能直接用 CSS 改样式
因为浏览器对 input[type="checkbox"] 的渲染是硬编码的，appearance: none 虽能隐藏它，但不加额外处理就只剩一个不可见元素——用户点不到、焦点不可达、屏幕阅读器也读不出状态。真要自定义，必须保留原生 input，再用伪元素“盖”在它上面。
用 ::before 和 ::after 替换 checkbox 的视觉层
核心思路是：把原生 input 移出视口（但不设 display: none），用其相邻的 label 绑定点击，再通过 input:checked + label::before 控制伪元素状态。
- 必须用
position: absolute或clip: rect()隐藏原生框，不能用visibility: hidden或opacity: 0——否则键盘Tab仍会聚焦到不可见区域，且部分屏幕阅读器会跳过 -
label必须和input显式关联（for="id"或包裹关系），否则点击无效 - 伪元素默认是 inline 级别，要设
display: inline-block才能控制宽高和content
input[type="checkbox"] {
position: absolute;
clip: rect(0 0 0 0);
}
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid #999;
margin-right: 8px;
vertical-align: middle;
}
input[type="checkbox"]:checked + label::before {
background: #007bff;
border-color: #007bff;
}
input[type="checkbox"]:checked + label::after {
content: "✓";
color: white;
font-size: 12px;
position: absolute;
top: 2px;
left: 4px;
}
:focus 和 :indeterminate 状态容易漏掉
只处理 :checked 是不够的。键盘操作依赖 :focus 显示轮廓，三态 checkbox（如父级全选）还要响应 :indeterminate ——这个状态无法通过 HTML 属性触发，只能靠 JS 设置 input.indeterminate = true。
-
:focus样式建议用outline或box-shadow，避免覆盖伪元素位置 -
:indeterminate下::before通常显示短横线或圆点，::after不应再显示勾号 - 部分旧版 Safari 对
:indeterminate伪元素支持不稳定，可加.is-indeterminate类兜底
无障碍（a11y）不是可选项，而是必填项
自定义后，aria-checked 不会自动同步，role="checkbox" 也不能替代原生语义。最简方案就是别动原生 input 的任何属性，只靠 CSS 视觉覆盖。
立即学习“前端免费学习笔记（深入）”；
- 确保
label文本清晰描述功能，不要只写“勾选”之类空泛词 - 禁用状态（
disabled）需同步作用于input和label的opacity/pointer-events - 颜色对比度至少 4.5:1（如
#007bff在白底上达标，但浅灰就不行）
真正麻烦的不是画个好看的方块，而是让键盘用户按 Space 能切换、NVDA 能读出“已选中”、触屏用户手指点得准——这些都藏在那个被 clip 掉的 input 里。
