答案：通过隐藏 checkbox 并用 label 模拟外观，利用 :checked 伪类切换样式实现自定义开关。1. 创建带 label 的 checkbox；2. 用 CSS 隐藏原生控件；3. 为 label 设计背景与滑块；4. 使用 :checked 状态改变颜色和位置，完成交互效果。
使用 :checked 伪类结合 CSS 和 HTML 可以轻松实现美观的自定义切换开关，无需 JavaScript。核心思路是隐藏默认的 checkbox 输入框，用 CSS 样式构建视觉上的开关，并通过 :checked 状态来切换样式。
1. 基础 HTML 结构
创建一个带 label 的 checkbox 输入框，label 将作为自定义开关的容器：
2. 隐藏默认 checkbox
使用透明度和尺寸控制隐藏原生控件，同时保持其可访问性：
.toggle-checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
3. 构建自定义开关外观
为 label 设置背景、圆角和过渡效果，模拟开关滑块：
立即学习“前端免费学习笔记（深入）”；
.toggle-label {
display: block;
width: 60px;
height: 30px;
background-color: #ccc;
border-radius: 15px;
position: relative;
cursor: pointer;
transition: background-color 0.3s ease;
}
.toggle-label::after {
content: '';
position: absolute;
width: 26px;
height: 26px;
border-radius: 50%;
background-color: white;
top: 2px;
left: 2px;
transition: transform 0.3s ease;
}
4. 使用 :checked 改变状态样式
当 checkbox 被选中时，改变 label 背景颜色并移动滑块：
.toggle-checkbox:checked + .toggle-label {
background-color: #4CAF50;
}
.toggle-checkbox:checked + .toggle-label::after {
transform: translateX(30px);
}
点击 label 会触发 checkbox 状态变化，CSS 自动响应 :checked 状态，实现视觉切换。你可以调整颜色、尺寸、动画速度来匹配设计风格。
基本上就这些，简单有效。
