因为原生 checkbox 无法直接渲染滑块轨道，必须隐藏 input 并用 label 的伪元素模拟开关视觉与交互。
为什么直接用 Bootstrap 的 form-check-input 无法实现开关效果
Bootstrap 默认的 form-check-input 是原生 <input type="checkbox">，它只提供基础勾选状态，视觉上完全依赖浏览器默认样式或 Bootstrap 的简单边框+对勾。开关（toggle switch）需要的是「滑块+轨道」的交互视觉，这必须通过自定义 CSS 覆盖原生控件的渲染逻辑——而原生 checkbox 本身不可直接绘制滑块，所以得用伪元素 + 隐藏原生控件 + 利用相邻兄弟选择器联动 label 实现。
如何用纯 CSS 把 form-check 改造成开关（不改 HTML 结构）
前提是保留 Bootstrap 的标准结构：<div class="form-check"><input class="form-check-input" type="checkbox"><label class="form-check-label">...</label></div>。关键在于：隐藏原生 input，用 ::before/::after 在 label 上画轨道和滑块，并监听 :checked 状态做位移动画。
- 必须给
.form-check-input加position: absolute; opacity: 0;—— 不用display: none或visibility: hidden，否则会丢失焦点和可访问性 - 给
.form-check-label设position: relative;，方便伪元素定位 - 用
.form-check-label::before绘制轨道（宽高固定，背景色+圆角），::after绘制滑块（小圆圈，绝对定位，初始左偏移） -
.form-check-input:checked + .form-check-label::after控制滑块右移，配合transition实现平滑切换 - 注意 Bootstrap 的
.form-check-input默认有margin-right: 0.5rem，要重置为margin: 0，否则会影响 label 内伪元素布局
兼容性和可访问性容易被忽略的点
开关不是纯装饰，它必须支持键盘操作（Tab 进入、Space 切换）、屏幕阅读器识别、以及移动端点击区域足够大。这些在美化时极易丢失。
- 确保
.form-check-label有足够点击热区（至少 44×44px），可用padding扩展，别只靠伪元素大小 - 原生
input不能删，且必须保留在label前面（才能用+选择器），否则:checked无法触发样式变化 - 添加
aria-checked="true/false"属性是自动的（浏览器根据 input 状态同步），但若手动 JS 控制状态，务必同步更新该属性 - 不要用
pointer-events: none在 input 上，否则键盘 Space 无法触发 - 深色模式下，轨道颜色需适配，建议用
color-scheme: light dark;或媒体查询判断
一个最小可用的开关 CSS 片段（适配 Bootstrap 5）
.form-check-input {
position: absolute;
margin: 0;
opacity: 0;
}
.form-check-label {
position: relative;
padding-left: 2.5rem;
cursor: pointer;
}
.form-check-label::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 2.5rem;
height: 1.25rem;
background-color: #e9ecef;
border-radius: 0.625rem;
transition: background-color 0.2s;
}
.form-check-label::after {
content: '';
position: absolute;
left: 0.25rem;
top: 50%;
transform: translateY(-50%);
width: 0.75rem;
height: 0.75rem;
background-color: #fff;
border-radius: 50%;
transition: transform 0.2s;
}
.form-check-input:checked + .form-check-label::before {
background-color: #0d6efd;
}
.form-check-input:checked + .form-check-label::after {
transform: translateY(-50%) translateX(1.25rem);
}
这段代码没加额外 class，直接作用于 Bootstrap 原有 class，避免污染结构。唯一要注意的是：如果项目用了 Bootstrap 的 Sass 变量（比如 $primary），建议把硬编码颜色换成 var(--bs-primary) 并确保 :root 中已定义。
立即学习“前端免费学习笔记（深入）”；
