CSS+HTML自定义checkbox效果的实例代码

<div class="wrap">
    <!-- `input`的id必须有，这个是label进行元素匹配所必需的 -->
    <!-- 可以看到每个input的id和label的“for”属性对应同一字符串 -->
<input type="checkbox" id="checkbox01" />
<label for="checkbox01"></label>
<input type="checkbox" id="checkbox02" />
<label for="checkbox02"></label>
<input type="checkbox" id="checkbox03" />
<label for="checkbox03"></label>
<input type="checkbox" id="checkbox04" />
<label for="checkbox04"></label>

.wrap {
  width: 500px;
  background-color: #EEE;
  border: 2px solid #DEF;
}
/ 隐藏所有checkbox /
input[type='checkbox'] {
  display: none;
}
/ 对label进行模拟.背景图片随便拼凑的，不要吐槽品味/
/   transition效果是做个背景切换效果，这里单纯演示而已，实际上这个过渡不加更自然/
label {
  display: inline-block;
  width: 60px;
  height: 60px;
  position: relative;
  background: url(//.chitanda.me/images/blank.png);
  background-position: 0 0px;
  -webkit-transition: background 0.5s linear;
}
/  利用相邻选择符和checkbox`:checked`的状态伪类来模拟默认选中效果（就是点击后那个勾号的效果）  /
/如果这段代码注释，点击后将没有任何反馈给用户/
/因为label本身是没有点击后被选中的状态的，checkbox被隐藏后，这个状态只能手动模拟/
input[type='checkbox']:checked+label {
  background-position: 0 -60px;
}

/ 伪元素的生效很简单，定义`content`就好，其余的属性和普通div一样 /
label::after {
   content: attr(data-name);
   /利用attr可以减少css代码量,data-name写在html部分的label属性里/
  display: inline-block;
  position: relative;
  width: 120px;
  height: 60px;
  left: 100%;
  vertical-align: middle;
  margin: 10px;
}