直接修改 form-check-input 样式行不通，因其为原生 checkbox，浏览器封闭渲染逻辑；需用 appearance: none 隐藏后通过相邻 label 的伪元素实现开关效果，并确保可访问性、响应式与深色模式兼容。
为什么直接改 form-check-input 样式行不通
Bootstrap 的 form-check-input 是原生 <input type="checkbox">，浏览器对其渲染逻辑高度封闭——你无法用 CSS 直接给它加滑块、画轨道或做位移动画。强行覆盖 width/height 只能缩放默认方框，且在深色模式、高缩放比（如 200% 字体）下极易错位或失焦。关键限制在于：appearance: none 是起点，但删掉它或用 display: none 会彻底破坏可访问性（键盘 Tab 进不去、Screen Reader 读不到）。
必须保留的 HTML 结构与定位前提
要让纯 CSS 开关跨设备生效，HTML 顺序和关系不能动：
-
<input type="checkbox" id="switch-1">必须在<label></label>前面，且两者为相邻兄弟（不能嵌套） -
<label for="switch-1"></label>必须显式关联，否则移动端点击热区极小（iOS Safari 尤其敏感） -
<label></label>需设position: relative，否则伪元素无法精确定位滑块 -
<input>用position: absolute; opacity: 0; margin: 0;隐藏——不是visibility: hidden，也不是display: none
响应式尺寸与滑块位移怎么算才不翻车
固定像素值（如 width: 48px）在小屏上挤占空间，在大屏上又显得单薄。正确做法是用相对单位配合 calc() 动态计算：
- 轨道宽度设为
width: calc(2.5em + 0.5rem)，随字体缩放自然伸缩 - 滑块直径用
width: calc(1em + 0.25rem)，避免在 125% 缩放时糊掉 - 滑块右移距离不是写死
left: 1.5rem，而是transform: translateX(calc(1.5em + 0.25rem))，确保不同字号下位移比例一致 - 媒体查询断点建议用
@media (max-width: 480px)收窄轨道，@media (min-width: 768px)加宽并提升高度
深色模式、焦点与触摸热区的三个硬性补丁
多数人只顾滑块动效，却在线上环境立刻暴露问题：
- 深色模式下轨道背景别硬写
#ccc，改用background: color-mix(in srgb, Canvas 70%, GrayText 30%)或系统色Field - 键盘用户按
Tab进入后，必须有清晰:focus轮廓：给label加outline: 2px solid Highlight，且不能被overflow: hidden截断 - 移动端点击区域至少
44×44px，靠伪元素撑不够——给label设padding: 0.5rem，再用min-height: 2.75rem保底
真正难的不是让开关“动起来”，而是让它的状态在任意设备、任意辅助技术、任意系统偏好下都可感知、可操作、不漂移。伪元素画得再酷，少了这三层补丁，就是线上事故。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
