1

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

4

3 回答 3

2

这是最简单的 CSS checkbox 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>

于 2018-04-03T09:08:55.293 回答
0

它的工作方式是有两个<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>

于 2018-04-03T09:14:26.990 回答
-1

使用您自己的 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"; 
}

密码笔

于 2018-04-03T08:54:39.757 回答