如何使用CSS和HTML永久更改Material Icon? [英] How do you change Material Icon permanently using CSS and HTML?

问题描述

单击图标后，我试图将图标从添加"永久更改为完成".如果再次单击该图标，它应该从完成"更改为添加". 我想知道是否可以在不使用Javascript的情况下使用CSS做到这一点.

I am trying to change the icon permanently from "add" to "done" after I click the icon. If I click the icon again, it should change from "done" to "add." I am wondering if it is possible to do this with CSS without using Javascript.

.material-icons::before {
  content: "add";
}

section:active .material-icons::before {
  /*background-color: red;*/
  content: "done";
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans" rel="stylesheet">

<section>
  <span id="btn1" class="material-icons"></span>
</section>

推荐答案

这是最简单的CSS复选框黑客解决方案，您可以从这里开始:

Here's the simplest CSS checkbox hack solution, you can start from here:

/* The hack */
input[type=checkbox] {
   display:none;
}
label {
  -webkit-appearance: push-button;
  -moz-appearance: button; 
  display: inline-block;
  cursor: pointer;
}

/* Default State */
input[type=checkbox] + section .material-icons::before {
   content:"add";
}

/* Toggled State */
input[type=checkbox]:checked + section .material-icons::before {
   content:"done";
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans"
  rel="stylesheet">

<label>Click Me
<input type="checkbox">
<section>
  <span id="btn1" class="material-icons"></span>
</section>
</label>

这篇关于如何使用CSS和HTML永久更改Material Icon?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！