直接修改 .form-check-input[type="checkbox"]:checked 的 background-color 无效，因 bootstrap 5 用 svg 背景图模拟滑块；需覆盖 background-image（含 url 编码颜色）、box-shadow、border 和 background-color 等关键属性，并添加 touch-action: manipulation 和 cursor: pointer 提升移动端响应。
直接改 .form-check-input[type="checkbox"] 的 :checked 伪类不生效？
Bootstrap 5 默认用 background-color + border 模拟开关的“滑块”效果，但实际渲染依赖 SVG 背景图（background-image）和 transform 位移。直接覆盖 background-color 几乎没用，因为 SVG 图像会盖住颜色。
真正起作用的是这三处：
-
.form-check-input:checked的background-image（默认是 base64 编码的 SVG） -
.form-check-input:focus的box-shadow（影响聚焦态蓝边） -
.form-switch .form-check-input的border和background-color（控制轨道底色）
重载 .form-switch 轨道和滑块颜色的最小改动方案
不要试图删掉 Bootstrap 的 CSS，而是用更高优先级的选择器覆盖关键属性。以下写法能稳定生效（放在 Bootstrap 引入之后）：
.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='%234CAF50'/%3e%3c/svg%3e");
}
.form-switch .form-check-input {
width: 48px;
height: 24px;
}
.form-switch .form-check-input:focus {
box-shadow: 0 0 0 0.25rem rgba(76, 175, 80, 0.25);
}
.form-switch .form-check-input:not(:checked):not(:disabled):active {
background-color: #e0e0e0;
}
.form-switch .form-check-input:not(:checked):not(:disabled) {
background-color: #bdbdbd;
}
注意：fill='%234CAF50' 是 URL 编码后的绿色，可替换成任意十六进制色值（记得编码）；width/height 改变后，SVG viewBox 需同步缩放，否则滑块错位。
用 SCSS 变量批量定制多个主题开关
如果你用 Bootstrap 的 SCSS 源码，更干净的方式是重定义 $form-switch-color、$form-switch-width 等变量，再重新编译。但要注意：
-
$form-switch-color只控制未选中时的轨道灰度，不控制选中色 - 选中色必须靠重写
.form-switch .form-check-input:checked的background-image - SCSS 中生成 SVG 用
escape-svg()和to-rgb()函数，避免手写 URL 编码出错
示例（在自定义 SCSS 文件中）：
$form-switch-color: #9e9e9e;
$form-switch-width: 48px;
$form-switch-height: 24px;
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/forms/form-switch";
.form-switch .form-check-input:checked {
background-image: escape-svg(
str-replace(
'<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><circle cx="12" cy="12" r="12" fill="#4CAF50"></circle></svg>',
"#4CAF50",
"#2196F3"
)
);
}
移动端点击区域小、响应迟钝？补上 touch-action 和 cursor
原生 .form-switch 在 iOS 上常出现点击无反馈或需双击才触发，根源是缺少触控行为声明。加这两行能立刻改善：
.form-switch .form-check-input {
touch-action: manipulation;
cursor: pointer;
}
同时确保父容器没设 pointer-events: none，且没有其他绝对定位元素遮挡点击区域。如果用了 label 包裹，确认 for 属性与 id 匹配——漏掉这个，CSS 再漂亮也点不动。
SVG 背景图尺寸、URL 编码、触控声明，这三点漏掉任一个，开关就可能只“看起来对”，实际交互失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
