如何用CSS和HTML实现Material Icon的点击切换（无需JavaScript）

当然可以做到！你当前用的:active伪类只有在按住鼠标点击的时候才会生效，松开就会立刻变回初始状态，没法实现持久切换。要达成你要的效果，我们可以借助CSS的:checked伪类配合一个隐藏的复选框来完成——毕竟只有表单元素的状态能在页面中持久保存，完全不需要JavaScript。

实现思路 #

• 用一个隐藏的复选框来记录点击状态，它的checked状态会在点击后保持，直到再次点击取消。
• 把图标放在<label>标签里，通过for属性和复选框关联，点击图标就相当于点击复选框，触发状态切换。
• 利用CSS相邻兄弟选择器，根据复选框的checked状态切换图标的内容。

完整代码示例 #

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans" rel="stylesheet">
<section>
  <!-- 隐藏的复选框，仅用来记录状态 -->
  <input type="checkbox" id="toggleBtn" class="toggle-checkbox">
  <!-- 关联复选框的标签，用来显示可点击的图标 -->
  <label for="toggleBtn" class="material-icons"></label>
</section>

/* 隐藏复选框，不让它显示在页面上 */
.toggle-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* 默认状态下显示add图标 */
.material-icons::before {
  content: "add";
  cursor: pointer; /* 给图标加上点击光标，提示用户可交互 */
}

/* 当复选框被选中时，切换为done图标 */
.toggle-checkbox:checked + .material-icons::before {
  content: "done";
}

效果说明 #

• 第一次点击图标，复选框被标记为checked，图标从add切换为done，状态会一直保持直到下次点击。
• 再次点击图标，复选框取消checked状态，图标切回add。
• 整个过程完全由CSS处理，没有任何JavaScript代码参与，兼容性覆盖所有现代浏览器。

内容的提问来源于stack exchange，提问作者marchelee