在前端开发中，通过复选框的选中状态控制SVG图标的切换与隐藏是常见需求，纯CSS实现方案无需依赖JavaScript，能减少代码体积并提升页面性能。这种方案的核心是利用CSS相邻兄弟选择器和属性选择器，匹配复选框的状态来修改对应SVG的显示属性。
实现原理
复选框的checked属性会随用户点击自动切换，我们可以通过:checked伪类选择器匹配选中状态。SVG图标可以通过display属性控制显隐，也可以通过opacity配合visibility实现过渡效果，还可以通过切换viewBox或者替换use标签的引用实现图标切换。
基础实现示例
首先准备HTML结构，将复选框和需要控制的SVG图标放在同一层级，方便使用相邻兄弟选择器匹配：
<!-- 隐藏原生复选框，用自定义样式替代 -->
<input type="checkbox" id="toggle-icon" class="checkbox-input">
<label for="toggle-icon" class="checkbox-label">
<svg class="icon-unchecked" width="24" height="24" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
<svg class="icon-checked" width="24" height="24" viewBox="0 0 24 24">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</svg>
</label>接下来编写CSS样式，首先隐藏原生复选框，设置两个SVG图标的初始显示状态：
/* 隐藏原生复选框 */
.checkbox-input {
display: none;
}
/* 设置label为行内块，方便调整样式 */
.checkbox-label {
display: inline-block;
cursor: pointer;
}
/* 未选中时显示勾选图标，隐藏加号图标 */
.icon-unchecked {
display: block;
}
.icon-checked {
display: none;
}
/* 复选框选中时的样式切换 */
.checkbox-input:checked ~ .checkbox-label .icon-unchecked {
display: none;
}
.checkbox-input:checked ~ .checkbox-label .icon-checked {
display: block;
}进阶技巧：平滑过渡与隐藏控制
如果需要隐藏和显示时有过渡效果，可以使用opacity和visibility替代display属性，避免display属性无法添加过渡的问题：
.icon-unchecked,
.icon-checked {
transition: opacity 0.3s ease, visibility 0.3s ease;
opacity: 1;
visibility: visible;
}
.checkbox-input:checked ~ .checkbox-label .icon-unchecked {
opacity: 0;
visibility: hidden;
}
.checkbox-input:checked ~ .checkbox-label .icon-checked {
opacity: 1;
visibility: visible;
}
/* 未选中时加号图标隐藏 */
.checkbox-input:not(:checked) ~ .checkbox-label .icon-checked {
opacity: 0;
visibility: hidden;
}场景适配：hover状态联动
还可以结合:hover伪类实现鼠标悬停时的图标状态变化，比如悬停时提前显示选中状态的图标：
/* 鼠标悬停在label上时，提前显示选中图标 */
.checkbox-label:hover .icon-unchecked {
opacity: 0;
visibility: hidden;
}
.checkbox-label:hover .icon-checked {
opacity: 1;
visibility: visible;
}
/* 选中状态下悬停不改变图标 */
.checkbox-input:checked ~ .checkbox-label:hover .icon-unchecked {
opacity: 0;
visibility: hidden;
}
.checkbox-input:checked ~ .checkbox-label:hover .icon-checked {
opacity: 1;
visibility: visible;
}注意事项
- SVG图标和复选框的层级关系要正确，相邻兄弟选择器只能匹配后续同级元素，因此复选框需要放在label之前
- 如果使用
use标签引用SVG sprite，同样可以通过切换href属性对应的片段标识实现图标切换，原理和上述示例一致 - 隐藏原生复选框时不要用
visibility: hidden，否则无法通过键盘的空格键触发选中状态，建议使用display: none或者视觉隐藏的样式方案