用CSS创建自定义切换开关，核心思路是借助checkbox的选中状态配合伪元素绘制视觉样式，完全不需要JavaScript参与逻辑。我们把原生输入框隐藏，用label承接点击，再利用::before和::after画出轨道与滑块，通过:checked切换位置即可。
基础HTML结构
先准备一个checkbox和对应的label，label里的span用来做视觉开关。结构要保持input和label相邻，方便用兄弟选择器控制。
<label class="switch"> <input type="checkbox" class="toggle-input"> <span class="slider"></span> </label>
用伪元素画开关
隐藏原生input，给slider设定轨道样式，用::before做滑块。轨道用圆角矩形，滑块默认在左侧。
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 26px;
}
.toggle-input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
inset: 0;
background-color: #ccc;
border-radius: 26px;
transition: background-color 0.3s;
}
.slider::before {
content: "";
position: absolute;
height: 20px;
width: 20px;
left: 3px;
bottom: 3px;
background-color: #fff;
border-radius: 50%;
transition: transform 0.3s;
}
切换状态控制
当input被选中时，通过相邻兄弟选择器改变轨道背景，并让伪元素滑块向右平移。
.toggle-input:checked + .slider {
background-color: #2196f3;
}
.toggle-input:checked + .slider::before {
transform: translateX(24px);
}
可访问性补充
为了键盘可用，给input加focus样式反馈，避免纯鼠标场景。
.toggle-input:focus + .slider {
box-shadow: 0 0 0 2px rgba(33,150,243,0.4);
}
常见注意点
- input必须真实存在，不能用div伪造，否则表单提交拿不到值
- label包裹input后，点击文字区域也能切换
- 过渡只写transform和background-color，性能更好
完整示例
下面给出一个可直接复制运行的页面片段。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
.switch { position: relative; display: inline-block; width: 50px; height: 26px; }
.toggle-input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background-color: #ccc; border-radius: 26px; transition: background-color 0.3s; }
.slider::before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: #fff; border-radius: 50%; transition: transform 0.3s; }
.toggle-input:checked + .slider { background-color: #2196f3; }
.toggle-input:checked + .slider::before { transform: translateX(24px); }
</style>
</head>
<body>
<label class="switch">
<input type="checkbox" class="toggle-input">
<span class="slider"></span>
</label>
</body>
</html>
通过以上伪元素方案，就能用纯CSS完成自定义toggle切换开关，结构清晰、易于维护，也方便后续扩展颜色或尺寸变量。
CSStoggle_switch伪元素修改时间：2026-07-27 20:03:23