答案：通过隐藏 checkbox 并用 label 模拟外观，利用 :checked 伪类切换样式实现自定义开关。1. 创建带 label 的 checkbox；2. 用 CSS 隐藏原生控件；3. 为 label 设计背景与滑块；4. 使用 :checked 状态改变颜色和位置，完成交互效果。
使用 :checked 伪类结合 CSS 和 HTML 可以轻松实现美观的自定义切换开关，无需 JavaScript。核心思路是隐藏默认的 checkbox 输入框，用 CSS 样式构建视觉上的开关，并通过 :checked 状态来切换样式。
1. 基础 HTML 结构
创建一个带 label 的 checkbox 输入框，label 将作为自定义开关的容器：
<input type="checkbox" id="toggle" class="toggle-checkbox"> <label for="toggle" class="toggle-label"></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 状态，实现视觉切换。你可以调整颜色、尺寸、动画速度来匹配设计风格。
基本上就这些，简单有效。
以上就是如何用css javascript java html JavaScript css html checkbox 伪类