//html
<label>
    <input name="checkbox" class="checkbox" type="checkbox"/>
    <s></s><span>天空</span>
</label>
<label>
    <input name="checkbox" class="checkbox" type="checkbox"/>
    <s></s><span>大地</span>
</label>

通過以上的HTML，將label與複選框關聯起來，這樣點選label就相當於點選複選框

//css
//隱藏預設的複選框樣式
.checkbox{
  display: none;
}
//自定義未選中的複選框樣式
.checkbox[type=checkbox]+s{
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url('http://host/name1.png');
  background-repeat: no-repeat;
}
//自定義選中時的複選框樣式
.checkbox[type=checkbox]:checked+s{
  background-image: url('http://host/name2.png'
 
);
}

單選框： 將checkbox換成radio即可