直接改 .form-check-input:checked 的 background-color 无效，因 Bootstrap 5 使用 base64 编码的 SVG background-image 渲染滑块或对勾，覆盖颜色会被 SVG 完全遮盖；真正需修改的是 background-image（含 URL 编码颜色）、border、background-color（轨道）、box-shadow（聚焦态）四者，缺一不可。
直接改 .form-check-input:checked 的 background-color 为什么无效
因为 Bootstrap 5 默认不用 background-color 渲染复选框的“对勾”或开关滑块，而是用 base64 编码的 SVG 作为 background-image。你改了 background-color，SVG 图像仍会盖在上面，视觉上完全没变化。
.form-switch 开关颜色要动哪几个 CSS 属性
真正起作用的是这四点，缺一不可：
-
background-image：必须替换为带新颜色的 SVG URL（fill值需 URL 编码，比如%234CAF50） -
border和background-color：控制轨道底色（未选中态） -
box-shadow：影响聚焦时的外发光，不改会保留默认蓝色光晕 -
width/height：若调整尺寸，SVG 的viewBox必须同比例缩放，否则滑块错位
.form-check-input[type="checkbox"] 自定义对勾颜色的最小改动
复选框（非开关）的对勾是 SVG 图像，不是伪元素生成的。要换颜色，只能重写 background-image：
.form-check-input[type="checkbox"]:checked {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%2310b981' d='M0 11l2-2 5 5L18 2l2 2L7 17z'/%3e%3c/svg%3e");
}
注意：fill 值要 URL 编码；路径 d 属性不能删，否则图标消失；如果用了 .form-check-inline，记得额外加选择器权重防止被覆盖。
容易被忽略的兼容性细节
这些点不处理，样式可能只在部分浏览器生效，或在深色模式下崩坏：
- 没加
touch-action: manipulation→ 移动端点击延迟、滑动误触发 - 没写
:focus-visible替代:focus→ 键盘用户看不到焦点环 - 只改了浅色模式下的
background-color，但没配@media (prefers-color-scheme: dark)→ 深色主题里颜色突兀甚至不可见 - 用
!important强行覆盖 → 后续 JS 动态切换状态（如disabled）可能失效
SVG 颜色值一旦写死，就和 CSS 变量解耦了；真要支持主题切换，得用内联 SVG + CSS 自定义属性注入，或者干脆切到 Sass 变量方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
