Bootstrap 5复选框默认选中色改不了，因原生input被隐藏，视觉由.form-check-input:checked::before（背景块）和::after（对勾）伪元素实现；须用!important覆盖这两个伪元素的background-color和border-color，并确保CSS在Bootstrap之后加载。
Bootstrap 5 复选框默认选中色为什么改不了？
直接写 input[type="checkbox"]:checked { background-color: red; } 没用——因为 Bootstrap 5 的复选框是「伪元素模拟」的：真实 <input> 被隐藏，视觉效果由 ::before 和 ::after 在父容器 .form-check-input 上叠加实现。你改的是那个不可见的原生控件，根本没渲染出来。
正确覆盖选中状态颜色的 CSS 选择器
必须作用于 Bootstrap 渲染出的伪元素，关键路径是：.form-check-input:checked + 后续兄弟伪元素。实际生效的是 .form-check-input:checked::after（对勾图标）和它所在的 ::before（背景圆/方块）。
- 改选中时的「背景块颜色」：用
.form-check-input:checked::before的background-color - 改对勾图标颜色：用
.form-check-input:checked::after的border-color或background-color（取决于 Bootstrap 版本微调） - 必须加
!important—— Bootstrap 的 CSS 权重高，且部分样式内联了background-image，仅靠background-color不够 - 推荐把规则放在 Bootstrap CSS 之后加载，或用更具体的选择器如
.my-custom-checkbox .form-check-input:checked::before
.form-check-input:checked::before {
background-color: #0d6efd !important;
border-color: #0d6efd !important;
}
.form-check-input:checked::after {
background-color: #fff !important;
border-color: #0d6efd !important;
}
不同主题（dark mode）下如何保持一致？
Bootstrap 5.3+ 支持 data-bs-theme="dark"，但它的复选框样式没自动适配深色背景——浅色对勾在黑底上可能看不见。不能只依赖媒体查询，得主动监听主题切换。
- 检查
html元素是否有data-bs-theme="dark"属性，用属性选择器覆盖：html[data-bs-theme="dark"] .form-check-input:checked::before - 深色模式下建议把对勾设为
background-color: #0d6efd（实心），而非依赖border-color描边，避免线条过细看不清 - 如果项目用了 CSS 变量（如
--bs-primary），可直接引用：background-color: var(--bs-primary);，但注意 Bootstrap 默认没给::before设变量，需自己定义
移动端点击区域变小、不响应？
覆盖样式后常见问题：对勾图标缩得太小，或 ::before 尺寸没同步更新，导致 iOS Safari 点击无反馈。
立即学习“前端免费学习笔记（深入）”；
- 务必同时设置
width和height在::before和::after上，推荐统一用0.875em（Bootstrap 默认尺寸） - 检查
.form-check-input是否被设置了opacity: 0以外的其它隐藏方式（比如visibility: hidden），这会阻止 pointer events 透传 - Android Chrome 有时需要加
-webkit-appearance: none;到.form-check-input，否则原生样式残留干扰
最稳妥的做法是复制 Bootstrap 源码里 .form-check-input 的基础尺寸和定位逻辑，再只替换颜色相关属性——别从零写。
