如何使用CSS和HTML永久更改材质图标?

Question

单击图标后，我正在尝试将图标从"添加"永久更改为"完成"。如果我再次单击该图标，它应该从"完成"更改为"添加"。 我想知道是否可以在不使用Javascript的情况下使用CSS执行此操作。

.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>

Answer 1

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

/* 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>

Answer 2

这种工作方式是有两个<span>(一个带有add，一个带有done图标)和一个复选框，它们都堆叠在一起，done图标被隐藏。add图标是pointer-events: none;，当您单击它时，复选框将被选中。然后隐藏add图标，并显示done图标。

(仅当您直接单击文本时才有效)

.done,
.add, .done {
position: absolute;
top: 0;
left: 0;
background-color: white;
}
.done { display: none; }
.add { display: inline-block; pointer-events: none; }
label {

display: inline-block;
cursor: pointer;
position: relative;
}
input[type=checkbox] { position: absolute; top: 0; left: 0; }
input[type=checkbox]:checked~.done { display: inline-block; }

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans" rel="stylesheet">
<input type="checkbox">
<div class="add">
<span id="btn1" class="material-icons first">add</span>
</div>
<div class="done">
<span id="btn1" class="material-icons">done</span>
</div>