直接给 input[type="checkbox"] 加 background-color 无效，因原生复选框由操作系统渲染，未选中态下 background-color 等样式被浏览器忽略；须用 appearance: none（含三前缀）清除默认样式，再通过伪元素配合 :checked 状态自定义视觉。
为什么直接给 input[type="checkbox"] 加 background-color 没用
不是你 CSS 写错了，是浏览器压根不让你改——原生复选框由操作系统渲染，background-color、border-radius、width 等样式在未选中态下基本被忽略。只有 accent-color 或部分 border 属性在 :checked 下可能生效。强行写只会看到“好像没反应”，这不是 bug，是规范限制。
必须先干掉原生外观：appearance 三前缀缺一不可
想接管样式，第一步是解除浏览器锁定。只写 appearance: none 不够，Safari 15.4 之前要 -webkit-appearance，Firefox 87 之前要 -moz-appearance。漏掉任一前缀，对应浏览器里就还是默认丑样式。
正确写法：
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
- 别用
display: none隐藏它——会切断屏幕阅读器和键盘焦点，可访问性崩盘 - 推荐用
position: absolute; opacity: 0; width: 1px; height: 1px;移出可视区，保留语义和交互能力 - 如果结构允许，
clip-path: inset(100%)也是个更现代的隐藏方案（Chrome 107+ / Safari 15.4+）
用 label::before 画框 + :checked + label::before 控状态
视觉层必须完全交给伪元素，不能“半接管”。核心逻辑是：靠 for/id 关联触发，用兄弟选择器 + 把状态映射过去。
立即学习“前端免费学习笔记（深入）”；
典型结构：
<input type="checkbox" id="agree" class="custom-checkbox"> <label for="agree" class="custom-checkbox__label">我同意条款</label>
关键样式：
.custom-checkbox__label::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid #999;
border-radius: 4px;
margin-right: 8px;
vertical-align: middle;
}
.custom-checkbox:checked + .custom-checkbox__label::before {
background-color: #4097fa;
border-color: #4097fa;
}
.custom-checkbox:checked + .custom-checkbox__label::before::after {
content: "\2713";
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
}
- 别在
content上做transition——CSS 不支持过渡 content 值 - 动画建议加在
background-color、transform或opacity上，比如transition: all 0.2s ease-in-out - 需要 indeterminate（半选）状态？得用 JS 设置
indeterminate = true，再加一条.custom-checkbox:indeterminate + .custom-checkbox__label::before规则
BEM 下处理 disabled 和 :focus 容易漏掉的点
BEM 不是起名游戏，命名背后是样式隔离和状态映射逻辑。很多人只写了正常态，结果 disabled 时还能点、focus 时没反馈，键盘用户直接卡住。
-
.custom-checkbox:disabled + .custom-checkbox__label::before必须设cursor: not-allowed+opacity: 0.5或border-color: #ccc -
:focus要作用在input上，不是label——label 默认不可聚焦，除非加tabindex="0"，但那会破坏语义顺序 - 焦点样式推荐用
box-shadow: 0 0 0 2px #4097fa，别用outline，因为 outline 不支持border-radius - 如果用了
position: absolute隐藏 input，记得同时加top: 0; left: 0;，否则某些屏幕阅读器可能定位错乱
最麻烦的其实是 indeterminate 状态的视觉一致性——它没有对应伪类（:indeterminate 是有的，但兼容性差），多数时候得靠 JS 手动切换 class 来模拟，且图标、颜色、动画都要单独配一套。
