直接改 input[type="checkbox"] 的 background-color 无效，因其为操作系统级控件，浏览器严格限制样式（如 background-color、border-radius 等）仅部分属性在 :checked 下可能生效；必须隐藏原生控件，用伪元素完全接管视觉层。
为什么直接改 input[type="checkbox"] 的 background-color 无效
因为原生 input[type="checkbox"] 是操作系统级控件，浏览器对其样式支持极有限。比如 background-color、border-radius 在未选中态下基本被忽略，只有 accent-color 或部分 border 属性在 :checked 下可能生效。这不是你写错了，是浏览器故意限制的——它不让你“半接管”渲染。
必须用 BEM 结构 + 伪元素完全接管视觉层
BEM 要求语义清晰、样式隔离，所以不能只靠 class 名，得配合 HTML 结构和 CSS 选择器逻辑。典型结构是：
<div class="checkbox"> <input type="checkbox" id="agree" class="checkbox__input"><label for="agree" class="checkbox__label">我已阅读并同意</label> </div>
关键实操点：
-
.checkbox__input必须用position: absolute; opacity: 0;隐藏（不用display: none，否则会破坏可访问性） -
.checkbox__label::before画出方框，控制width、height、border、border-radius等全部外观 - 用
.checkbox__input:checked + .checkbox__label::before切换选中态，比如改background-color、插入content: "\2713" - 如果需要动画，给
::before加transition: all 0.2s ease-in-out，但避免在content上做过渡（不支持）
如何让 BEM 复选框支持 disabled 和 focus 状态
原生状态必须显式映射到自定义层，否则键盘用户或屏幕阅读器会感知错乱。常见遗漏点：
-
.checkbox__input:disabled + .checkbox__label::before要设opacity: 0.5或border-color: #ccc，同时加cursor: not-allowed -
.checkbox__input:focus + .checkbox__label::before建议加box-shadow: 0 0 0 2px #4097fa（注意不是 outline，outline 不可圆角） - 千万别只写
:focus在 label 上——label 默认不可聚焦，必须靠tabindex="0"或依赖for关联 input 的焦点冒泡 - 辅助功能要求：保留
id和for，且.checkbox__label内容必须可读，不能只靠图标
BEM 命名下容易踩的兼容性坑
看似只是命名规范问题，但实际影响样式作用域和维护成本：
- 别用
.checkbox--large直接改::before尺寸——应写成.checkbox--large .checkbox__label::before { width: 24px; height: 24px; }，否则 BEM 模块化失效 - 避免在
.checkbox__input上写任何可见样式（如width），它只负责行为，所有视觉都在::before/::after中 - Safari 对
appearance: none支持不稳定，尤其旧版本，所以仍建议用opacity: 0+position隐藏，而非依赖appearance - 如果项目要支持 IE11，
::before里别用flex或transform: translate()居中勾号，改用line-height+text-align兼容
最常被忽略的是：BEM 不是套个 class 名就完事，它要求结构、命名、样式作用域三者严格对齐。一个没隐藏干净的 input，或者少写了一个 :disabled 映射，都会让整个组件在真实用户场景中“看起来正常，用起来异常”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
