时间戳

首页 > 解决方案 > 在没有 JAVASCRIPT 的情况下检查时如何更改 CSS 复选框标签图标

html - 在没有 JAVASCRIPT 的情况下检查时如何更改 CSS 复选框标签图标

问题描述

我有一个没有 javascript 的汉堡菜单（我不能使用它，这就是分配），使用来自 FontAwesome 的标签图标，我希望在选中复选框时图标更改为另一个，我只是不知道该怎么做那。我在网上查了一下，显然没有 JS 是不可能的，但我宁愿问一下以防万一。

该图标直接在标签内使用class，我知道我可以添加任意数量的标签，它们只会堆叠起来，但我不知道如何根据复选框的状态隐藏/显示其中一个或者如果有另一种方式：

<div id="hamburger">
    <img src="thelogo.png" alt="logo">
    <input type="checkbox" id="button">
    <label for="button" class="fas fa-bars"></label>
    <ul class="items">
        <li>EPISODES</li>
        <li>INTERVIEWS</li> 
        <li>ABOUT US</li>
    </ul>
</div>

标签： htmlcss

解决方案

您可以使用多个图标并显示/隐藏任何您想要的。

<input type="checkbox" id="button">
<label for="button" class="fas fa-bars"></label>
<label for="button" class="fas arrow-circle-up"></label>

#button:checked ~ .fa-bars {
   display: none;
}

#button:checked ~ .arrow-circle-up {
   display: inline-block;
}

或者更优雅的方式是更新图标代码的内容。

#button ~ label::before {
  content: '\f0c9'; // bars code
}

#button:checked ~ label::before {
  content: '\f0aa'; // arrow up code
}

这是所有图标代码的备忘单

推荐阅读