怎样通过CSS定制Bootstrap 5表单开关Switch的尺寸与颜色？-css教程-PHP中文网

修改.form-check-input[type="checkbox"]尺寸不生效，因bootstrap 5隐藏原生控件并依赖::before/::after伪元素渲染视觉效果，须同步调整伪元素的width、height、top、left及状态样式，而非直接设置input尺寸。

怎样通过css定制bootstrap 5表单开关switch的尺寸与颜色？

修改 `.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，否则焦点色还是默认蓝

比如换成绿色主题：

Switch Modes

动态切换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);
}