因为Bootstrap 5将.form-check-input设为position: absolute; opacity: 0，它仅作透明触发器，真正渲染边框和对勾的是.form-check-label::before和::after伪元素，修改input自身background等样式无效。
为什么 .form-check-input 上改 background 没反应
因为 Bootstrap 5 把 .form-check-input 设为 position: absolute; opacity: 0，它只是个“透明触发器”，真正显示的边框和对勾是 .form-check-label::before 和 .form-check-label::after 画出来的。你改 input 自身的 background、border-radius 或 color，等于给隐身人涂指甲油——完全没用。
常见错误现象：
- 写了
background-color: #0d6efd却毫无变化 - 加了
border-radius: 4px，但复选框还是方的 - 禁用态下文字变灰，但对勾图标还亮着、颜色不对
必须确保三件事：
-
.form-check-input保持position: absolute; opacity: 0（不能用display: none，否则破坏可访问性） -
.form-check-label设为position: relative，否则伪元素定位会漂移 - 所有视觉状态都靠兄弟选择器控制：
.form-check-input:checked + .form-check-label::after，不是:checked::after
:checked ~ .custom-control-label::before 不生效
这个选择器在 Bootstrap 4 的 .custom-checkbox 中很常见，但它极其依赖 HTML 结构：input 必须和 label 在**同一个父级 <div> 内**，且 input 必须在 label 前面。中间插一个 <span>、<div>，甚至一段 HTML 注释，都会让整个选择器失效。
检查方法：
- 用开发者工具选中复选框，看它的直接父元素是否同时包含
<input>和<label> - 确认
label的for属性值与input的id严格一致（大小写、空格、连字符都不能错） - 如果用了
data-bs-toggle="tooltip"或其他 JS 组件包裹过该区域，注意它们可能动态重排 DOM，导致结构断裂
加了 form-check-inline 还是竖着排
这不是样式没加载，而是布局链断了。Bootstrap 5 的 form-check-inline 本质是给容器加 display: inline-block 和水平间距，它不改 flex 流向，也不对抗父级设置。一旦父容器有冲突规则，就立刻失效。
高频原因：
- 父容器宽度不够（比如被
col-12、窄卡片或max-width: 300px限制） - 祖先元素用了
flex-column、d-flex flex-column或flex-wrap: wrap - 漏写了基础类
form-check，只写了form-check-inline—— 后者只是增强，不是替代 - 小屏幕下自动退化为垂直排列（这是响应式设计，不是 bug；若强行横排，需覆盖
@media (max-width: ...)，但会损害可访问性）
结构必须“一选项一容器”：每个复选框都要独立包在 <div class="form-check form-check-inline"> 里，不能把多个 <input> 塞进同一个 div。
自定义 SVG 对勾图标颜色不生效
Bootstrap 默认用 background-image: url("data:image/svg+xml,...") 渲染对勾，其中颜色由 URL 编码里的 %23fff（即 #fff）控制。你改 CSS 的 color 或 fill 没用，因为那是内联 SVG 的填充，不在 CSS 控制范围内。
正确做法是重写整个 background-image，并替换 URL 中的颜色编码：
.form-check-input:checked + .form-check-label::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M3.1 4.9l-1.4 1.4L0 4.6l1.4-1.4 1.7 1.7L6.9 1.4 8.3 2.8z'/%3e%3c/svg%3e") !important;
}
注意点：
-
%23是#的 URL 编码，后面跟十六进制色值（如28a745），不要漏掉%23 - 必须加
!important，否则容易被 Bootstrap 原生规则覆盖 - 如果用了构建工具（如 Webpack/Vite），部分 loader 会自动转义 data URL，这时建议把 SVG 提取为独立文件再引用
最常被忽略的一点：伪元素的尺寸依赖于 ::before 的宽高和 top/left 定位。如果你只改了对勾颜色，但没同步调整 ::before 的 background-color 和边框，视觉上就会出现“对勾浮在灰色方块上”的割裂感。
