修改.form-check-input[type="checkbox"]尺寸不生效，因Bootstrap 5隐藏原生控件并依赖::before/::after伪元素渲染视觉效果，须同步调整伪元素的width、height、top、left及状态样式，而非直接设置input尺寸。
修改 .form-check-input[type="checkbox"] 的尺寸不生效？先关掉伪元素覆盖
Bootstrap 5 的 Switch 是用 .form-check-input + ::after 伪元素模拟的，直接改 width/height 没用——因为真实 checkbox 被隐藏了，视觉效果全靠伪元素撑着。
必须同时处理两处：
- 把原生
input的尺寸设为 0（保持可访问性但不可见） - 重写
.form-check-input[type="checkbox"]::after的width、height、top、left - 顺手把
.form-check-input:focus的 outline 也调一下，不然焦点样式会错位
示例：把开关拉宽到 50px，高 26px：
.form-check-input[type="checkbox"] {
width: 0;
height: 0;
}
.form-check-input[type="checkbox"]::after {
width: 50px;
height: 26px;
top: -1px;
left: -1.5rem;
}
.form-check-input:focus {
outline: 2px solid #0d6efd;
outline-offset: 2px;
}切换颜色时为什么背景/滑块都不变？得分别控制 ::before 和 ::after
Switch 的「轨道」是 ::after，「滑块」是 ::before。Bootstrap 默认用 background-color 控制轨道，用 border-color 控制滑块边框，但没设滑块背景——所以你改 background-color 只影响轨道。
立即学习“前端免费学习笔记（深入）”；
要自定义颜色，得这样配对写：
- 轨道（
::after）：改background-color（关闭态）和background-color（开启态，通过.form-check-input:checked::after） - 滑块（
::before）：改background-color（开启态）、border-color（关闭态）、transform（水平位移） - 别漏掉
.form-check-input:focus下的box-shadow，否则焦点色还是默认蓝
比如换成绿色主题：
动态切换AI模型以优化成本与性能。当用户发出“eco mode”、“balanced mode”、“smart mode”或“max mode”等模式指令，或使用“/modes status”查询状态及“/modes setup”配置模式时触发。
.form-check-input[type="checkbox"]::after {
background-color: #e9ecef;
}
.form-check-input:checked::after {
background-color: #28a745;
}
.form-check-input::before {
border-color: #adb5bd;
}
.form-check-input:checked::before {
background-color: #fff;
transform: translateX(24px);
}
.form-check-input:focus {
box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
}响应式缩放开关时，translateX() 值怎么算？别硬写像素值
缩放后，滑块的 translateX() 必须跟着变，否则会滑出轨道外。Bootstrap 原始值是 translateX(24px)，对应轨道宽 40px、滑块宽 16px（40 − 16 = 24）。所以新位移 = 新轨道宽 − 新滑块宽。
更稳妥的做法是用 calc() 或 CSS 变量动态算：
- 定义变量：
--switch-width: 50px; --thumb-width: 22px; - 然后：
transform: translateX(calc(var(--switch-width) - var(--thumb-width))); - 这样改尺寸时只需调两个变量，不用反复算差值
注意：IE 不支持 calc() 在 transform 里，如果还要兼容 IE，就得用 JS 动态写内联 style 或 fallback 到固定 px 值。
用 prefers-color-scheme 适配深色模式时，:checked 状态容易漏掉
深色模式下，你可能想让轨道变暗、滑块变亮。但只写 @media (prefers-color-scheme: dark) 里的 ::after，不重复声明 :checked::after，会导致开启态颜色还是浅色——因为选择器优先级不够。
必须显式写出所有组合状态：
@media (prefers-color-scheme: dark) .form-check-input::after@media (prefers-color-scheme: dark) .form-check-input:checked::after@media (prefers-color-scheme: dark) .form-check-input::before@media (prefers-color-scheme: dark) .form-check-input:checked::before
否则深色模式下开关一打开，就变回默认蓝底白块——这是最常被忽略的细节。
