直接给input[type="checkbox"]写样式无效，因浏览器对其渲染硬编码，background-color等属性被忽略；必须隐藏原生控件（opacity:0+absolute），用label绑定并借助:checked与伪元素实现自定义样式。
为什么直接给 input[type="checkbox"] 写样式没用
浏览器对原生复选框的渲染控制极强，appearance: none 虽能重置部分外观，但 Safari 旧版本、IE 等根本不支持；即使支持，也无法可靠控制勾选图标、焦点态、禁用态或动画。更关键的是：伪元素（如 ::before）无法直接附加在 input 上——它不是可生成内容的元素。真正可行的路径只有一条：视觉隐藏真实控件，用 label 承载交互与样式。
label 和 input 怎么绑定才不会失效
绑定失败是自定义复选框“点不动”的最常见原因。必须满足以下任一条件：
-
label使用for属性，且值与input的id完全一致（大小写敏感） -
input直接嵌套在label内部（推荐，语义清晰、无 ID 冲突风险） - 绝不能仅靠 DOM 邻近顺序“碰运气”——没有
for也没有嵌套，点击就完全不触发状态切换
错误示例：<input id="agree"><label>我同意</label> —— 这里 label 和 input 毫无关联，Space 键和鼠标点击都无效。
怎么安全地隐藏原生 input 又不破坏无障碍
display: none 或 visibility: hidden 会让屏幕阅读器彻底忽略该控件，同时中断键盘 tab 流程，违反 WCAG。正确做法是保留其可访问性，仅做视觉移除：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
.custom-checkbox input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
这样 input 仍能被聚焦、被读出、响应 Space 键，但不占布局空间、不可见。
用伪元素画勾选框时，:checked 选择器怎么写才生效
核心逻辑是：状态变化由原生 input 驱动，样式响应靠兄弟或后代关系。写法取决于 DOM 结构：
- 若用
for+id（input在label外）：input:checked + label::before（相邻兄弟）或input:checked ~ label::before（后续所有兄弟） - 若用嵌套结构（
<label><input>...</label>）：input:checked + span::before（需在input后放一个span作伪元素容器），或更稳妥地：label input:checked ~ .checkmark::before - 千万别写
label:checked::before——label本身没有:checked状态
容易卡住的点：伪元素层级被遮挡、position: relative 没加在 label 上导致定位错乱、忘记给 ::before 设 content: ""。
真正难的不是画个好看的框，而是让每个环节——绑定、隐藏、状态同步、焦点管理、键盘操作——全部对齐。尤其在团队协作中，有人删掉 for 改成 class，或者把 input 移到 label 外又不补 for，整个功能就静默崩溃，还查不出 JS 报错。
