纯CSS开关组件是前端交互中常用的元素，结合SVG可以实现开关切换时图标同步变化的无JavaScript依赖效果，整体实现思路清晰，适配性和性能都比较优秀。
实现原理说明
核心思路是通过隐藏的input[type="checkbox"]元素作为开关状态的控制源，利用CSS的:checked伪类选择器判断开关状态，再通过相邻兄弟选择器或通用兄弟选择器控制SVG图标的显示和隐藏，同时配合CSS过渡效果实现平滑的切换动画。
HTML结构搭建
需要准备隐藏的checkbox、作为开关容器的label、以及两个分别对应开和关状态的SVG图标，结构如下：
<div class="toggle-switch">
<input type="checkbox" id="toggle" class="toggle-input">
<label for="toggle" class="toggle-label">
<!-- 关状态图标 -->
<svg class="icon icon-off" viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
</svg>
<!-- 开状态图标 -->
<svg class="icon icon-on" viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14l-5-5 1.41-1.41L11 13.17l7.59-7.59L20 7l-9 9z"/>
</svg>
<span class="toggle-slider"></span>
</label>
</div>CSS样式编写
先处理基础样式，隐藏原生的checkbox，设置开关容器的外观，再控制两个SVG图标的显示逻辑：
/* 隐藏原生checkbox */
.toggle-input {
display: none;
}
/* 开关容器样式 */
.toggle-label {
position: relative;
display: inline-flex;
align-items: center;
width: 60px;
height: 30px;
background-color: #ccc;
border-radius: 15px;
cursor: pointer;
transition: background-color 0.3s ease;
padding: 0 5px;
box-sizing: border-box;
}
/* 开关滑块样式 */
.toggle-slider {
position: absolute;
left: 3px;
width: 24px;
height: 24px;
background-color: #fff;
border-radius: 50%;
transition: left 0.3s ease;
z-index: 1;
}
/* 图标基础样式 */
.icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: opacity 0.3s ease;
color: #666;
}
/* 关状态图标位置 */
.icon-off {
right: 8px;
}
/* 开状态图标位置 */
.icon-on {
left: 8px;
opacity: 0;
}
/* 开关选中时的容器背景 */
.toggle-input:checked + .toggle-label {
background-color: #4caf50;
}
/* 开关选中时滑块位置 */
.toggle-input:checked + .toggle-label .toggle-slider {
left: calc(100% - 27px);
}
/* 开关选中时关图标隐藏，开图标显示 */
.toggle-input:checked + .toggle-label .icon-off {
opacity: 0;
}
.toggle-input:checked + .toggle-label .icon-on {
opacity: 1;
color: #fff;
}效果说明与扩展
上述代码实现后，点击开关区域就会触发checkbox的状态切换，CSS会自动处理背景色、滑块位置、两个SVG图标的显隐切换，整个过程没有使用任何JavaScript代码。
如果需要更换其他图标，只需要替换两个SVG元素的path内容即可，也可以调整viewBox、width、height属性适配不同的图标尺寸。如果要调整动画速度，修改transition属性的时间值就可以实现更快或更慢的切换效果。
完整示例整合
将HTML和CSS整合后可以直接运行：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS带图标切换的开关组件</title>
<style>
.toggle-input {
display: none;
}
.toggle-label {
position: relative;
display: inline-flex;
align-items: center;
width: 60px;
height: 30px;
background-color: #ccc;
border-radius: 15px;
cursor: pointer;
transition: background-color 0.3s ease;
padding: 0 5px;
box-sizing: border-box;
}
.toggle-slider {
position: absolute;
left: 3px;
width: 24px;
height: 24px;
background-color: #fff;
border-radius: 50%;
transition: left 0.3s ease;
z-index: 1;
}
.icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: opacity 0.3s ease;
color: #666;
}
.icon-off {
right: 8px;
}
.icon-on {
left: 8px;
opacity: 0;
}
.toggle-input:checked + .toggle-label {
background-color: #4caf50;
}
.toggle-input:checked + .toggle-label .toggle-slider {
left: calc(100% - 27px);
}
.toggle-input:checked + .toggle-label .icon-off {
opacity: 0;
}
.toggle-input:checked + .toggle-label .icon-on {
opacity: 1;
color: #fff;
}
</style>
</head>
<body>
<div class="toggle-switch">
<input type="checkbox" id="toggle" class="toggle-input">
<label for="toggle" class="toggle-label">
<svg class="icon icon-off" viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
</svg>
<svg class="icon icon-on" viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14l-5-5 1.41-1.41L11 13.17l7.59-7.59L20 7l-9 9z"/>
</svg>
<span class="toggle-slider"></span>
</label>
</div>
</body>
</html>