直接用 无法自定义样式，因浏览器 UA 样式强制覆盖 width/height、border-radius 等属性；需隐藏原生控件（opacity: 0 + pointer-events: none），通过 :checked 驱动关联 的伪元素实现滑动开关，并确保可访问性与深色模式适配。
为什么直接用 <input type="checkbox"> 无法自定义样式
浏览器对原生 <input type="checkbox"> 的渲染高度受限，width/height、border-radius、背景色等 CSS 属性在多数浏览器中被忽略（尤其是 Chrome 和 Safari）。强行设置常导致布局错位或样式失效，不是“没效果”，而是被 UA 样式强制覆盖。
解决思路是：隐藏原生 checkbox，用其 :checked 状态驱动兄弟元素（如 <label></label>）或父容器内的伪元素表现开关状态。
关键点：
- 必须用
position: absolute或opacity: 0+pointer-events: none隐藏原生控件，不能只靠visibility: hidden（会丢失可访问性焦点） -
<label></label>必须与input关联（通过for属性或包裹结构），否则点击无响应 - 伪元素（
::before/::after）要放在label上，而非input—— 因为input不支持伪元素
如何用 ::after 实现滑动圆钮 + 背景色切换
核心是把 label 当作开关容器，用 ::after 绘制滑块，通过 transform: translateX() 控制左右位移，并配合 transition 实现动画。
立即学习“前端免费学习笔记（深入）”；
示例结构：
<label class="switch"> <input type="checkbox"> <span class="slider"></span> </label>
CSS 关键片段：
.switch {
position: relative;
display: inline-block;
width: 52px;
height: 26px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .3s;
border-radius: 26px;
}
.slider::before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .3s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #2196F3;
}
input:checked + .slider::before {
transform: translateX(26px);
}注意：translateX(26px) 是因为滑块宽度为 52px，圆钮直径 18px，留白各 4px → 可移动距离 = 52 − 18 − 4 − 4 = 26px。硬编码这个值容易出错，建议用 calc(100% - 18px) 替代。
:checked 状态下如何避免 iOS Safari 点击无反馈
iOS Safari 对 label 包裹 input 的点击区域识别较严格：若 label 内部没有文本内容，或 input 未正确关联，可能出现“点了没反应”或“需点两次才触发”。这不是 bug，是 Safari 对可点击区域的默认最小尺寸限制（约 44×44px）。
实操建议：
- 给
label设置min-width: 44px和min-height: 44px，确保触控区域达标 - 避免将
input放在label外部再用for关联 —— 尽量用嵌套结构（<label><input>...</label>） - 不要给
input设pointer-events: none—— 它本身不可见，但需保留事件捕获能力；真正禁用指针的是opacity: 0 - 加一句
-webkit-appearance: none到input，防止某些旧版 Safari 强制渲染原生样式
如何支持深色模式并保持语义化
纯 CSS 开关按钮容易在深色模式下对比度不足（比如灰色背景 + 灰色滑块），但又不能只靠 @media (prefers-color-scheme: dark) 粗暴反转颜色 —— 用户可能手动切换主题，且无障碍需求要求状态必须可感知。
推荐做法：
- 用
color-scheme: light dark声明组件支持双色模式（写在.switch类上），让浏览器自动适配表单控件基础色调 - 滑块背景色改用
background-color: Canvas;（系统画布色），圆钮用color: CanvasText;，这样能跟随系统主题自动变色 - 保留
aria-checked属性（通过 JS 同步），或直接用原生input的checked属性 —— 它天然支持屏幕阅读器 - 禁用
user-select: none，避免干扰可访问性选中逻辑
真正难的不是画个开关，而是让它的状态在任何上下文里都清晰、可操作、可感知。很多人卡在圆钮偏移不准或 iOS 点不灵，其实问题不在 CSS 技巧，而在是否尊重了表单元素的交互契约。
