使用 CSS 在 Checkbox 中显示自定义的勾号、叉号和减号图标

【问题标题】：shows customized tick, cross and minus sign icon in Checkbox using CSS使用 CSS 在 Checkbox 中显示自定义的勾号、叉号和减号图标
【发布时间】：2017-03-08 20:31:37
【问题描述】：

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

注意：没有使用任何图标（例如：字体真棒）或图像。

请帮帮我。

我已附上图片。

复选框 3 状态图像

【问题讨论】：

提供您到目前为止所做的代码。
阅读这篇文章：stackoverflow.com/a/27437664/1355315

标签： javascript jquery css checkbox

【解决方案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>

【讨论】：