用checkbox做开关最稳妥，因其天然支持键盘操作、屏幕阅读器语义、表单提交及状态同步；应隐藏原生控件并用label关联视觉层，通过:checked与兄弟选择器控制样式，禁用pointer-events而非display:none以保障可访问性。
为什么直接用 <input type="checkbox"> 做开关最稳妥
因为原生 checkbox 天然支持键盘操作（空格切换）、屏幕阅读器语义、表单自动提交和 checked 状态同步。强行用 <div> + JS 模拟，容易漏掉 aria-checked、role="switch"、焦点管理，还可能在 Safari 或旧版 Edge 中失焦或无法回车触发。
正确做法是保留 input[type="checkbox"]，仅用 CSS 隐藏它，再通过 label 关联视觉层：
<label class="toggle"> <input type="checkbox" name="notify" value="on"> <span class="toggle-track"></span> <span class="toggle-thumb"></span> </label>
关键点：
-
label必须包裹input，或用for属性绑定id，否则点击轨道/滑块无法触发状态变更 -
input不能设display: none（会脱离可访问性树），应改用position: absolute; opacity: 0; pointer-events: none; -
toggle-track和toggle-thumb都要通过input:checked + .toggle-track .toggle-thumb或相邻兄弟选择器控制状态，避免 JS 干预
用 :checked + ~ 选择器驱动样式切换
CSS 里不能直接选中父元素或前一个兄弟，所以结构必须保证 input 在视觉元素之前，才能用 ~（通用兄弟）或 +（紧邻兄弟）定位：
立即学习“前端免费学习笔记（深入）”；
.toggle input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.toggle-track {
display: inline-block;
width: 52px;
height: 28px;
background: #e0e0e0;
border-radius: 14px;
position: relative;
cursor: pointer;
}
.toggle-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 24px;
height: 24px;
background: white;
border-radius: 50%;
transition: transform 0.2s ease, background 0.2s ease;
}
.toggle input:checked ~ .toggle-track {
background: #4caf50;
}
.toggle input:checked ~ .toggle-track .toggle-thumb {
transform: translateX(24px);
}
注意：
- 不要用
transition: all，会导致边框、阴影等无关属性也过渡，卡顿明显 - 移动端需加
-webkit-appearance: none防止 iOS 自带样式干扰 - 如果
toggle-thumb是伪元素（如::after），记得给.toggle-track设position: relative，否则定位失效
处理 disabled 状态和 focus 可见性
禁用态不能只靠 opacity: 0.5，必须配合 pointer-events: none 和语义标记：
<label class="toggle"> <input type="checkbox" name="backup" disabled checked> <span class="toggle-track"></span> <span class="toggle-thumb"></span> </label>
CSS 中：
.toggle input:disabled ~ .toggle-track {
background: #f5f5f5;
cursor: not-allowed;
}
.toggle input:disabled ~ .toggle-track .toggle-thumb {
background: #bdbdbd;
}
.toggle input:focus ~ .toggle-track {
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
}
重点：
- 禁用的
input仍需保留在 DOM 中，否则表单序列化时丢失字段 -
focus样式必须足够明显（尤其深色背景），否则键盘用户无法感知当前焦点位置 - 别忘了测试 Tab 键能否进入/离开该控件——如果
label没设tabindex，且内部input被pointer-events: none影响，可能跳过
React/Vue 中绑定 v-model / useState 的常见陷阱
框架里最容易犯的错是把事件监听绑在 label 或 span 上，绕过原生 input 的状态更新机制：
❌ 错误写法（React）：
<label onClick={() => setIsOn(!isOn)}>
<span className="toggle-track"></span>
<span className="toggle-thumb" style={{ left: isOn ? '24px' : '2px' }}></span>
</label>
✅ 正确写法（React）：
<label className="toggle">
<input
type="checkbox"
checked={isOn}
onChange={(e) => setIsOn(e.target.checked)}
/>
<span className="toggle-track"></span>
<span className="toggle-thumb"></span>
</label>
原因：
- 手动模拟状态容易和 DOM 实际值不同步（比如服务端渲染后 hydrate 失败）
- 失去浏览器原生的
indeterminate支持、form.reset()同步能力 - Vue 的
v-model必须作用于input元素本身，否则指令不生效
真正复杂的点不在样式，而在确保「语义完整」和「状态单一信源」——哪怕多写几行 CSS，也比后期修复无障碍或表单提交问题省力得多。
