如何使用 CSS 和 HTML 永久更改 Material Icon？答案

【问题标题】：How do you change Material Icon permanently using CSS and HTML?如何使用 CSS 和 HTML 永久更改 Material Icon？
【发布时间】：2018-09-12 12:45:09
【问题描述】：

单击图标后，我试图将图标从“添加”永久更改为“完成”。如果我再次单击该图标，它应该从“完成”变为“添加”。我想知道是否可以在不使用 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>

【问题讨论】：

after I click it --> 点击 == javascript
哦，所以没有可能使用 css 来做到这一点？
你可能会考虑一些 hack/workaround .. 但你描述的是一个 JS 工作
纯css不行，需要自己处理click事件。
啊，我明白了.. 好的，那么感谢您的建议！

标签： html css icons google-material-icons

【解决方案1】：

其工作原理是有两个<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>

【讨论】：

我已经运行了你的代码，但结果和我的一样。嗯，是的，我正在使用 chrome
@JamesDouglas 这只会在你按下鼠标时改变，当你放开点击按钮时它会再次变回之前的图标（使用 chrome）
@marchelee 好的，我已经修好了。享受吧！

【解决方案2】：

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

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

【讨论】：

非常感谢！！ @Balázs Varga
@JamesDouglas 什么？它会更改图标，但也会滚动到页面顶部（默认button 行为）。在最新的 Chrome、FF 甚至 IE11 中进行了测试（不会将元素显示为按钮，但其他一切都正常）。
but also scroll to the top of the page (default button behaviour) --> 你认为这个副作用不重要吗？对我来说，这让整个事情变得糟糕
@BalázsVarga OP 似乎暗示该按钮应在单击一次后永久保持在done。
@BalázsVarga 您目前的工作方式与what the OP has完全相同。

【解决方案3】：

使用你自己的 html/css 东西：

如果这对你有帮助，请告诉我。

.material-icons.md1::before{
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 33px;
    content:"add"; 
}

.btnwrap:hover .material-icons.md1::before{
    content:"done"; 
}

Codepen

【讨论】：

把问题读到最后……或者至少把标题读到最后……
当然，然后尝试编辑您的问题。还不够清楚。
这不是我的问题 ;) ...而且问题很明确
要清除您的问题，您需要进行编辑。问题：我可以在 CSS 中使用材质图标实现 onClick 效果吗？
再说一遍，这不是我的问题...请注意谁在评论