直接改 .form-switch .form-check-input:checked 的 background-color 无效，因 bootstrap 5 使用 base64 svg 作为 background-image 渲染滑块，fill 属性（需 url 编码）才决定颜色；必须重写 background-image 并同步调整 viewbox、cx/cy/r 尺寸，同时补全轨道、聚焦、禁用等状态样式。
直接改 .form-switch .form-check-input:checked 的 background-color 为什么没用
因为 Bootstrap 5 的开关滑块不是靠纯色块渲染，而是用一个 base64 编码的 SVG 图像作为 background-image 覆盖在滑块上。你设的 background-color 被这张图完全遮住了，自然看不见效果。真正控制滑块颜色的是 SVG 中的 fill 属性，它被 URL 编码后嵌在 background-image 里。
必须重写 background-image 并注意 URL 编码
要换滑块颜色，得替换整个 background-image 值，把其中 fill='%23xxxxxx' 部分换成你想要的颜色（十六进制需 URL 编码，比如 #ff6b6b → %23ff6b6b）。示例：
.form-switch .form-check-input:checked {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3e%3ccircle cx='12' cy='12' r='12' fill='%23ff6b6b'/%3e%3c/svg%3e");
}
- SVG 的
viewBox、cx、cy、r必须和原始尺寸匹配；如果改了开关宽高（如设width: 48px），这些值也要同比例缩放，否则滑块会偏移或裁切 - 别用在线工具随便编码——确保
#被转成%23，字母大小写保持一致（%23FF6B6B和%23ff6b6b都行，但混用可能出错） - 这个规则必须放在 Bootstrap CSS 文件引入之后，否则会被覆盖
漏掉这些样式，开关看起来会“不完整”
只换滑块颜色不够，轨道、聚焦态、禁用态都得补全，否则交互反馈断裂：
-
.form-switch .form-check-input:not(:checked):not(:disabled)控制未选中时的轨道底色，建议设为中性灰（如#bdbdbd） -
.form-switch .form-check-input:focus要加box-shadow，不然键盘聚焦时没有视觉提示（漏掉会导致可访问性问题） -
.form-switch .form-check-input:active或:not(:checked):active可微调按压反馈，增强手感 - 移动端记得加
touch-action: manipulation和cursor: pointer，否则部分安卓 WebView 点击无响应
别指望 CSS 变量或 :root 动态换色
Bootstrap 5 的 .form-switch 不读取任何 CSS 自定义变量（比如 --bs-primary），也不支持通过 :root { --bs-switch-color: ... } 统一控制。所有颜色定制必须硬编码进 background-image 的 SVG 字符串里。想换色就得批量替换 URL 编码值，没法运行时切换。
最易被忽略的是 SVG 尺寸与开关容器尺寸的耦合——哪怕只改了一个像素的 width，没同步调 viewBox 和 r，滑块就会贴边、溢出或变扁。动手前先确认你改的尺寸是否真的必要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
