纯CSS实现：响应复选框状态的SVG图标切换与隐藏技巧

碧海醫心

发布时间：2025-10-14 10:00:06

138人浏览过

来源于php中文网

原创

纯CSS实现：响应复选框状态的SVG图标切换与隐藏技巧

本文详细介绍了如何利用纯css，通过复选框（checkbox）的状态变化来动态切换和隐藏svg图标，从而构建一个交互式的主题切换器。核心技巧在于巧妙运用css的`visibility`属性与相邻兄弟选择器，实现图标的平滑显示与隐藏，避免了javascript的介入，保持了css的强大控制力。

引言：纯CSS实现动态SVG图标切换

在现代Web开发中，实现交互式UI组件往往需要JavaScript的辅助。然而，对于一些状态切换类的组件，例如主题切换器（深色/浅色模式），纯CSS也能提供优雅且高性能的解决方案。本文将深入探讨如何利用HTML的复选框（input type="checkbox"）结合CSS的强大选择器和属性，实现一个带有动态SVG图标切换效果的纯CSS开关。我们将重点解决在复选框不同状态下，如何精确控制两个SVG图标（例如太阳和月亮）的显示与隐藏。

核心挑战与visibility属性

在尝试根据复选框状态切换元素显示时，开发者常会想到使用display: none;来隐藏元素。然而，display: none;会使元素完全从文档流中移除，不占据任何空间，这在某些需要保持布局稳定或进行过渡动画的场景下可能不适用。例如，当两个图标需要交换位置或平滑切换时，display: none;会导致瞬间的布局跳动。

为了解决这个问题，CSS提供了visibility属性。当设置为visibility: hidden;时，元素虽然不可见，但它仍然占据着其在文档流中的原始空间。这使得我们可以在不影响周围布局的前提下，通过切换visibility: visible;来显示元素。更重要的是，visibility属性可以进行过渡动画，虽然不像opacity那样平滑，但在某些场景下仍然非常有用。

HTML结构设计

为了实现纯CSS的开关效果，HTML结构至关重要。我们需要一个label元素来包裹input[type="checkbox"]，这样点击整个开关区域都能触发复选框状态的改变，提升用户体验。在label内部，除了隐藏的复选框，还需要一个容器来承载开关的视觉部分，以及两个分别代表不同状态的SVG图标。

立即学习“前端免费学习笔记（深入）”；

以下是实现此功能所需的HTML结构示例：

<label class="ThemeToggler" for="ThemeTogglerID">
  <!-- 隐藏的复选框，用于控制状态 -->
  <input id="ThemeTogglerID" class="ThemeTogglerInput" type="checkbox" checked />

  <!-- 开关的视觉填充区域和图标容器 -->
  <div class="ThemeTogglerFill">
    <!-- 太阳图标 -->
    <div class="SunIcon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <!-- 太阳SVG路径 -->
        <path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z" />
        <path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z" />
        <path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z" />
        <path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z" />
        <path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z" />
        <path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z" />
        <path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z" />
        <path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z" />
        <path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z" />
      </svg>
    </div>
    <!-- 月亮图标 -->
    <div class="MoonIcon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <!-- 月亮SVG路径 -->
        <path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z" />
      </svg>
    </div>
  </div>
</label>

SCSS/CSS实现细节

我们将使用SCSS来编写样式，因为它提供了变量、混合（mixin）和嵌套等功能，使得代码更易于维护和阅读。

1. 基础样式与变量定义

首先定义一些SCSS变量，用于控制开关的尺寸、颜色等，方便统一管理。

$width: 80px;
$height: 44px;
$border-radius: 50px;
$circle-size: $height - 4px; // 滑块大小
$icon-size: $circle-size - 2px; // 图标大小

// 颜色变量
$neutral: red;
$secondary: white;
$base-100: white;
$base-200: gray;
$base-300: black;
$base-content: white;

// 开关容器样式
.ThemeToggler {
  width: $width;
  height: $height;
  flex-shrink: 0;
  border-radius: $border-radius;
  background-color: $neutral;
  border: 1px solid $base-100;
  display: inline-block;
  cursor: pointer;
  &:hover {
    border-color: $secondary;
  }
}

2. 开关填充区域与滑块

.ThemeTogglerFill 是开关的背景和滑块的容器。滑块本身通过伪元素 ::before 实现，并带有过渡效果。

Seed-Music

字节跳动推出的AI音乐生成与编辑工具

下载

.ThemeTogglerFill {
  position: relative; // 伪元素定位的参考
  &:before {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    height: $circle-size;
    width: $circle-size;
    background: $base-300;
    box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.15);
    border-radius: $border-radius;
    transition: background-color 0.25s, transform 0.25s; // 添加过渡动画
  }
}

3. 隐藏复选框并控制滑块动画

input.ThemeTogglerInput 是实现状态切换的核心，但它本身应该被隐藏。通过&:checked伪类和通用兄弟选择器~，我们可以根据复选框的选中状态来控制其兄弟元素（.ThemeTogglerFill）的样式，从而实现滑块的移动。

.ThemeTogglerInput {
  display: none; // 隐藏原生复选框

  // 当复选框被选中时，移动滑块
  &:checked ~ .ThemeTogglerFill::before {
    transform: translateX($circle-size); // 滑块向右移动一个其自身宽度
  }

  // ... 接下来的图标切换逻辑
}

4. SVG图标的显示与隐藏（核心）

这是本教程的关键部分。我们将利用相邻兄弟选择器+和visibility属性来控制图标的显示与隐藏。

首先，定义一个@mixin来统一图标的通用样式。

@mixin icon {
  position: relative; // 方便图标内部SVG的定位
  display: block;
  width: $icon-size;
  height: $icon-size;
  border-radius: 50%;
  overflow: hidden; // 确保SVG内容不会溢出
  fill: $base-content; // 设置SVG的填充色
}

.SunIcon {
  @include icon;
  top: 1.8px;
  left: 1.7px;
}

.MoonIcon {
  @include icon;
  top: -35px; // 初始定位，可能需要调整以确保图标在正确位置
  left: $circle-size + 2px;
}

现在，我们将图标的visibility逻辑集成到.ThemeTogglerInput的样式中：

.ThemeTogglerInput {
  display: none;

  &:checked ~ .ThemeTogglerFill::before {
    transform: translateX($circle-size);
  }

  // 默认状态（复选框未选中）
  // 使用 '+' 相邻兄弟选择器，因为 .ThemeTogglerFill 紧跟在 .ThemeTogglerInput 后面
  & + .ThemeTogglerFill {
    .MoonIcon {
      visibility: hidden; // 月亮图标默认隐藏
    }
    .SunIcon {
      visibility: visible; // 太阳图标默认显示
    }
  }

  // 选中状态（复选框被选中）
  &:checked + .ThemeTogglerFill {
    .SunIcon {
      visibility: hidden; // 太阳图标隐藏
    }
    .MoonIcon {
      visibility: visible; // 月亮图标显示
    }
  }
}

通过上述SCSS代码，我们实现了：

当input未被选中时 (& + .ThemeTogglerFill)，.SunIcon可见，.MoonIcon隐藏。
当input被选中时 (&:checked + .ThemeTogglerFill)，.SunIcon隐藏，.MoonIcon可见，同时滑块移动。

完整的SCSS代码如下：

$width: 80px;
$height: 44px;
$border-radius: 50px;
$circle-size: $height - 4px;
$icon-size: $circle-size - 2px;
$neutral: red;
$secondary: white;
$base-100: white;
$base-200: gray;
$base-300: black;
$base-content: white;

.ThemeToggler {
  width: $width;
  height: $height;
  flex-shrink: 0;
  border-radius: $border-radius;
  background-color: $neutral;
  border: 1px solid $base-100;
  display: inline-block;
  cursor: pointer;
  &:hover {
    border-color: $secondary;
  }
}

.ThemeTogglerFill {
  position: relative;
  &:before {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    height: $circle-size;
    width: $circle-size;
    background: $base-300;
    box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.15);
    border-radius: $border-radius;
    transition: background-color 0.25s, transform 0.25s;
  }
}

.ThemeTogglerInput {
  display: none;
  &:checked ~ .ThemeTogglerFill::before {
    transform: translateX($circle-size);
  }

  // 默认状态：复选框未选中时，显示太阳，隐藏月亮
  & + .ThemeTogglerFill{
    .MoonIcon{
      visibility:hidden;
    }
    .SunIcon {
     visibility: visible;
    }
  }

  // 选中状态：复选框选中时，隐藏太阳，显示月亮
  &:checked + .ThemeTogglerFill {
    .SunIcon {
     visibility: hidden;
    }
    .MoonIcon{
      visibility:visible;
    }
  }
}

@mixin icon {
  position: relative;
  display: block;
  width: $icon-size;
  height: $icon-size;
  border-radius: 50%;
  overflow: hidden;
  fill: $base-content;
}

.SunIcon {
  @include icon;
  top: 1.8px;
  left: 1.7px;
}

.MoonIcon {
  @include icon;
  top: -35px; // 注意：此处的负值top可能是为了将月亮图标定位到正确位置，具体值需根据实际布局调整
  left: $circle-size + 2px;
}

注意事项与最佳实践

visibility vs display:
- visibility: hidden;：元素隐藏但仍占据空间，可以进行过渡动画（如opacity），适合平滑切换。
- display: none;：元素完全移除，不占据空间，无法进行过渡动画，适合彻底移除元素。
- 在本例中，visibility是更优的选择，因为它允许两个图标在相同位置进行切换，而不会导致布局跳动。
CSS选择器优先级和结构:
- + (相邻兄弟选择器)：选择紧跟在指定元素后的兄弟元素。在本例中，input + .ThemeTogglerFill 意味着选择紧跟在input后的.ThemeTogglerFill。
- ~ (通用兄弟选择器)：选择在指定元素之后的所有兄弟元素。在本例中，input ~ .ThemeTogglerFill::before 意味着选择在input之后的所有.ThemeTogglerFill的::before伪元素。
- 理解这些

如何正确实现嵌套 div 布局：解决浮动导致的容器塌陷与内容重叠问题

如何在 Go 模板中简洁地条件性注入 HTML 属性值

实现元素在滚动过程中从固定定位切换为容器内粘性定位，并随指定区域滚动而缩放显示

如何实现登录表单完全覆盖注册表单的CSS动画效果

HTML Number Input 默认值设为 0 的完整解决方案

相关专题

点击input框没有光标怎么办

点击input框没有光标的解决办法：1、确认输入框焦点；2、清除浏览器缓存；3、更新浏览器；4、使用JavaScript；5、检查硬件设备；6、检查输入框属性；7、调试JavaScript代码；8、检查页面其他元素；9、考虑浏览器兼容性。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

198

2023.11.24

minimax入口地址汇总

本专题整合了minimax相关入口合集，阅读专题下面的文章了解更多详细地址。

2026.03.16

C++多线程并发控制与线程安全设计实践

本专题围绕 C++ 在高性能系统开发中的并发控制技术展开，系统讲解多线程编程模型与线程安全设计方法。内容包括互斥锁、读写锁、条件变量、原子操作以及线程池实现机制，同时结合实际案例分析并发竞争、死锁避免与性能优化策略。通过实践讲解，帮助开发者掌握构建稳定高效并发系统的关键技术。

2026.03.16

TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开，深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析，帮助开发者构建类型安全、结构清晰、易维护的前端工程体系，提高团队协作效率与代码质量。

113

2026.03.13

Python异步编程与Asyncio高并发应用实践

本专题围绕 Python 异步编程模型展开，深入讲解 Asyncio 框架的核心原理与应用实践。内容包括事件循环机制、协程任务调度、异步 IO 处理以及并发任务管理策略。通过构建高并发网络请求与异步数据处理案例，帮助开发者掌握 Python 在高并发场景中的高效开发方法，并提升系统资源利用率与整体运行性能。

138

2026.03.12

C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开，系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例，帮助开发者掌握构建高可用微服务系统的关键技术，提高系统的可扩展性与维护效率。

395

2026.03.11

Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开，系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示，帮助开发者构建稳定高效的 Go 并发任务处理系统，提高系统在高负载环境下的处理能力与稳定性。

2026.03.10

Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开，重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析，帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系，提升团队协作效率与项目迭代速度。

111

2026.03.09

JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开，系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理，以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例，帮助开发者理解浏览器底层工作原理，并掌握提升网页加载速度与交互体验的实用技巧。

113

2026.03.06

热门下载

网站特效

网站源码

网站素材

前端模板