javascript - 使用 CSS 在复选框中显示自定义的勾号、叉号和减号图标

Question

使用 CSS 自定义勾号、叉号和减号复选框。

注意:没有使用任何图标(例如:很棒的字体)或图像。

请帮帮我。

我附上了图片。

复选框 3 状态图像

Answer 1

尝试

label.checkbox input[type="checkbox"] {display:none;}
label.checkbox span {
  display:inline-block;
  border:2px solid #BBB;
  border-radius:10px;
  width:25px;
  height:25px;
  background:#C33;
  vertical-align:middle;
  margin:3px;
  position: relative;
  transition:width 0.1s, height 0.1s, margin 0.1s;
}
label.checkbox :checked + span {
  background:#6F6;
  width:27px;
  height:27px;
  margin: 2px;
}
label.checkbox :checked + span:after {
  content: '\2714';
  font-size: 20px;
  position: absolute;
  top: -2px;
  left: 5px;
  color: #99a1a7;
}

<label class="checkbox">
  <input type="checkbox"/>
  <span></span>
  I like cake
</label>