CSS设置checkbox/radio样式

CSS设置checkbox/radio样式

1. 使用背景图修改样式
   注意：借用label来实现input功能及样式

Html：

<input class="checkbox-square" type="checkbox" id="word" />
<label for="word"> </label>
//label中需要注明for属性

CSS：

.checkbox-square {
  // 使input自身样式隐藏
  display: none;
}
.checkbox-square[type="checkbox"] + label {
  // 利用label显示input效果图
  display: inline-block;
  margin: auto auto;
  height: 1.2em;
  width: 1.2em;
  background: url(/icon_unselected.png) no-repeat;
  background-size: 100%;
}
.checkbox-square[type="checkbox"]:checked + label {
  display: inline-block;
  margin: auto auto;
  height: 1.2em;
  width: 1.2em;
  background: url(/icon_selected.png) no-repeat;
  background-size: 100%;
}