bootstrap开关默认样式改不动是因为其通过伪元素::before/::after绘制视觉效果，需覆盖.form-switch .form-check-input + .form-check-label::before（轨道）和::after（滑块）并处理:checked、:disabled及:checked:disabled等所有状态。
Bootstrap开关默认样式为什么改不动
因为Bootstrap 5的.form-check-input[type="checkbox"]开关实际是隐藏原生input，靠兄弟元素.form-check-label和伪元素::before/::after画出视觉开关——你直接给input加style或写CSS规则基本无效。
常见错误现象：input { background: red; }完全没反应；用!important强行覆盖也只影响不到1px的透明区域。
- 真正要改的是
.form-check-input[type="checkbox"] + .form-check-label::before（轨道）和::after（滑块） - Bootstrap 5.3+默认用
background-image: url("data:image/svg...")画勾，自定义时建议直接用background-color替代 - 注意
.form-switch类必须显式添加，否则用的是普通复选框样式
用伪元素重绘开关轨道和滑块
核心是覆盖Bootstrap的::before（轨道）和::after（滑块），同时保留input:checked状态切换逻辑。
使用场景：想把默认灰色轨道改成蓝色，滑块从浅灰变深蓝，且带平滑过渡。
/* 必须加 .form-switch 才生效 */
.form-switch .form-check-input:focus {
box-shadow: none; /* 去掉聚焦蓝框，可选 */
}
.form-switch .form-check-input + .form-check-label::before {
background-color: #e0e7ff; /* 轨道未选中色 */
border-radius: 32px;
height: 24px;
width: 48px;
}
.form-switch .form-check-input:checked + .form-check-label::before {
background-color: #4f46e5; /* 轨道选中色 */
}
.form-switch .form-check-input + .form-check-label::after {
background-color: #fff;
border-radius: 50%;
height: 20px;
width: 20px;
top: 2px;
left: 2px;
transition: all 0.2s ease-in-out;
}
.form-switch .form-check-input:checked + .form-check-label::after {
left: 26px; /* 滑块右移距离 = 轨道宽 - 滑块宽 */
}
-
left: 26px不是固定值，得按你设的width动态算：比如轨道48px、滑块20px，则48 - 20 = 28，再减去left初始偏移2px→26px - 没加
transition的话，滑块会瞬移，体验很硬 - 别漏掉
.form-switch这个父级类，否则CSS权重不够
响应式尺寸与移动端点击热区问题
Bootstrap开关默认高度小，手指点不准，尤其在iOS Safari里容易误触或失效。
性能/兼容性影响：增大尺寸本身无性能问题，但transform: scale()可能触发重绘，不如直接调height/width稳妥。
- 用
min-height和min-width扩展开关容器，不破坏布局流 - 给
.form-check-label加padding-left: 1.5rem，避免文字贴太近被误点 - iOS上若点击无反应，检查是否被
-webkit-appearance: none干扰（Bootstrap已处理，一般不用动） - 不要用
zoom或transform: scale()，会导致::after定位错乱
禁用状态（disabled）样式怎么同步更新
原生input[disabled]会自动让兄弟.form-check-label变灰，但伪元素轨道/滑块不会自动响应——你得手动加规则。
常见错误现象：开关置灰了，但轨道还是亮蓝色，滑块还在中间，看起来像“卡住”。
- 必须写
.form-switch .form-check-input:disabled + .form-check-label::before和::after两套规则 - 推荐用
opacity: 0.5统一降透明度，比单独调background-color更省事且一致 - 别只写
:disabled，漏掉:checked:disabled会导致“禁用+已开启”状态样式错乱
复杂点在于，所有伪元素状态（未选中/选中/禁用/禁用且选中）都要配齐，少一个就露馅。最容易被忽略的是:checked:disabled组合——它既不是纯禁用，也不是纯选中，得单独写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
