直接给 checkbox 加背景色无效，需隐藏原生控件并用 label + :checked + 伪元素模拟样式；通过 padding、min-height 扩大点击区域，状态同步仍需 js 监听 change 事件。
直接给 input[type="checkbox"] 加背景色无效
因为原生复选框是表单控件，浏览器对其渲染受限，background-color、border 等样式在多数浏览器中被忽略。不能靠直接写 input:checked { background: #007bff; } 实现视觉反馈。
用 label + :checked + label 选择器控制关联元素
核心思路是把真实 input 隐藏，用紧邻的 label（或其伪元素）模拟可点击区域，并通过兄弟选择器响应选中状态。
- 确保
input和label正确关联：用for属性指向id，或把input包在label内 - 隐藏原生控件：
input[type="checkbox"] { display: none; } - 用
input:checked + label或input:checked ~ label触发样式变更 - 背景效果通常加在
label上，而非input
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label {
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
}
input[type="checkbox"]:checked + label {
background-color: #007bff;
color: white;
}
::before 或 ::after 画自定义勾选图标更可控
仅改 label 背景不够精细时，可用伪元素绘制对勾、圆点等，避免依赖字体图标或额外 DOM。
- 伪元素默认不显示，需设
content: "" - 用
position: absolute定位到 label 内合适位置 - 勾选状态用
input:checked + label::before控制显隐或颜色 - 注意
label需设position: relative才能约束伪元素定位
input[type="checkbox"] + label {
position: relative;
padding-left: 32px;
}
input[type="checkbox"] + label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
border: 2px solid #999;
border-radius: 4px;
}
input[type="checkbox"]:checked + label::before {
background-color: #007bff;
border-color: #007bff;
}
input[type="checkbox"]:checked + label::after {
content: "✓";
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 14px;
}
移动端点击区域小？记得扩大可触控范围
隐藏原生控件后，若只靠文字区域响应点击，容易误操作。必须显式提升 label 的点击面积。
立即学习“前端免费学习笔记（深入）”；
- 用
padding扩展横向空间 - 用
min-height或line-height保证纵向高度 ≥ 44px（iOS 最小推荐触控尺寸） - 避免设置
pointer-events: none在父容器上 - 测试真机点击，别只看桌面端 hover 效果
复杂点在于：背景样式要和业务逻辑解耦，比如“全选”复选框可能需要同步更新多个子项状态，此时 CSS 无法驱动 JS 行为 —— :checked 只管视觉，状态同步还得靠事件监听 change。
