通过CSS的伪类选择器，配合相邻元素选择器，即可方便的控制i标签的样式；

• 通过绝对定位控制input标签的位置，demo里是铺满整个div
• 设置opacity为0隐藏input标签
• 给i标签设置默认未选中时的样式
• 通过【:checked +】选择器给i标签设置选中样式

HTML：

  <div>
    <input type="checkbox" name="" value="">
    <i></i>
  </div>

CSS：

div{
  position: relative;
}

input{
  position: absolute;
  top: 0;right: 0;left: 0;bottom: 0;
  opacity: 0;
}

i{
  display: block;
  width: 4px;
  height: 4px;
  background: url(img/un-checked.png) no-repeat;
  background-size: contain;
}

input:checked + i{
  background: url(img/checked.png) no-repeat;
  background-size: contain;
}