纯CSS改变CheckBox样式

由于HTML自带的CheckBox的样式很丑，好多时候我们需要自己改变其样式，尤其是要开发移动网页的时候更是要将其改变成类似于app的开头式按钮，下面来说一下怎样不通过js，单纯的利用css来达到效果。

完成效果：

html代码结构：

将check的框调到最左边，并且隐藏

.ckbClass {  
  display: none;
  float: left;
}

将checkbox的label设置成关闭时所要显示的图片

.ckbClassOff {
  background-image: url(/img/ckb_off.png);
  background-size: 57px;
  background-position: right center;
  background-repeat: no-repeat;
  cursor: pointer;
  display: inline-block;
  height: 32px;
  line-height: 32px;
  min-height: 32px;
  position: absolute;
  right: 0;
  top: 3px;
  width: 57px;
}

将checkbox选中状态时的label设置成打开时所要显示的图片

.mailSettingSwitch input[type="checkbox"]:checked + label {
  background-image: url(/img/ckb_on.png);
}

两个注意点：

1，label中的for属性一定要指定到正确的checkbox上。

2，如果用chrome模拟手机调试，checkbox的选中状态不会实时显示。（43.0.2357.124版）