如何使用纯 CSS 实现复选框切换时图标从汉堡菜单变为关闭符号-html教程-PHP中文网

如何使用纯 CSS 实现复选框切换时图标从汉堡菜单变为关闭符号

本文讲解如何通过调整 HTML 元素顺序与正确使用 CSS 相邻/兄弟选择器，实现在复选框（checkbox）勾选状态下，动态切换的 ::before 伪元素内容，完成汉堡菜单（☰）到关闭图标（✕）的视觉转换。

本文讲解如何通过调整 html 元素顺序与正确使用 css 相邻/兄弟选择器，实现在复选框（checkbox）勾选状态下，动态切换 `` 的 `::before` 伪元素内容，完成汉堡菜单（☰）到关闭图标（✕）的视觉转换。

在纯 CSS 驱动的响应式导航菜单中，常借助隐藏的 <input type="checkbox"> 控制菜单显隐，并利用 ::before 或 ::after 伪元素渲染交互图标。但一个常见误区是：CSS 无法向上选择父元素或前序兄弟元素——这意味着若 <label></label> 写在 <input> 之前，#toggle:checked ~ label::before 将完全失效，因为 ~（通用兄弟选择器）只能匹配位于目标元素之后的同级元素。

✅ 正确解法是 将 <input id="toggle"> 移至 <label for="toggle"></label> 之前，确保它们处于同一层级且顺序合理。这样，当复选框被勾选时，可通过 :checked 状态配合 ~ 选择器精准定位后续的 <label></label>，并修改其伪元素内容：

#toggle {
  display: none;
}
#toggle:checked ~ .menu {
  display: block; /* 显示菜单 */
}
#toggle:checked ~ label::before {
  content: "\2716"; /* ✕ 关闭符号（Unicode U+2716） */
}
label::before {
  content: "\2630"; /* ☰ 汉堡图标（Unicode U+2630） */
  font-size: 1.5rem;
  cursor: pointer;
  padding-right: 1rem;
}

对应 HTML 结构必须严格遵循此顺序：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<div class="main-nav">
  <input type="checkbox" id="toggle"><label for="toggle"></label>
  <nav class="menu"><a href="#one">Link 1</a>
    <a href="#two">Link 2</a>
    <!-- 更多链接 -->
  </nav>
</div>

⚠️ 注意事项：

使用 ::before（双冒号）而非 :before，以符合现代 CSS 伪元素规范；
Unicode 符号需用 \XXXX 转义格式（如 \2630），不可直接写 ☰（部分环境可能编码异常）；
.menu 的显示控制也应基于 #toggle:checked ~ .menu，而非 +（相邻兄弟），因 .menu 并非紧邻 <input> 的下一个元素；
若需增强可访问性，建议为 <label></label> 添加 aria-label="Toggle menu"，并在 JS 备用方案中同步处理焦点与状态。