如何重定义checkbox的样式呢，一般有如下两种方式： 雪碧图与checkbox
技术相关：
label：单击label，相应会跳转至label对应id的相应控件。通过这一原理，可以提供一个自定义样式的思路：即为 定义一个input控件并将其显示隐藏，然后通过设定label的样式，实现单击label控制input，并且使label样式进行变化，这样看起来就是input发生了变化。
checked: input[type="checkbox"]:checked css中的选择器伪类，代表着你被选中了的状态，就是当你被选择时你的样式的重新定义。
原材料准备：图
雪碧图
1 使用雪碧图以及步骤
所谓雪碧图，就是在网站中有诸多图片的情况，将所有图片一一拼接在一个很大很大的图中，在使用时通过css定位技术精准定位与显示，从而得到想要的效果。我们得到一张整合的图，通过定位将图片展示。
技术相关：
background-position ： 精确设置background的背景位置
先在html中创建一个盒子，盒子中存在 label 与 input type="checkbox"两个元素，根据label的定义所知，只要点击input对应的label，input也会根据label进行checked的变化，切换到控件自身。
html
然后定义label的元素背景图以及定义位置：
将checkbox隐藏掉
css
通过这种方式，定义checkboxb下的label 点击前与点击后的样式。
绝对定位是为了相对于父元素的定位，小控件的放置，用绝对定位更为精准。
width和height的设置根据图片大小进行判断。
所写的background 是background-position等的缩写，至于为何是负数，因为这个position的定位在图片的左上角，即以左上角为原点进行的图片变换，以上边界为+x轴，左边界为-y轴，那么，当进行图片的平移时，向左移动即为负值，向下移动也为负值。
2 使用伪元素进行定义
技术相关：
after:: 伪元素，按照我的理解来说，就是新增了一个不存在于html源代码中的dom容器元素，这个可以对这个元素进行样式与内容的设定让其能够在页面中展现，从而实现将对dom元素要实现的操作以css的形式实现。 （只能在选择器中声明一个伪元素）。
依旧首先创建一个html盒子
html
然后定义css：
如何通过伪元素进行样式的重写呢？
伪元素 我们姑且认为他是css选择器创造出来的一个虚拟的容器，那我们将这个虚拟的容器定义宽高，再将这个容器增加样式，那么他就可以在html页面中展现出自己的样式，也就是我们用css创造出了一个元素！ 这样的话，当我们点击checkbox时，checkbox中的对号不就可以通过伪元素来进行定义啦！ 这个对号，不就可以设置一个长方形，隐去它的上边和右边，再旋转45度，再为其增添颜色，即可变为一个标准的对号。
那这个元素该如何展示呢，我们这里使用的opacity透明度属性，当为checked时，opacity：1使其可见，平时都为opacity：0，使用这种视觉的魔术，即可展现出点击和不被点击时的样式！
伪类与伪元素：选择器的伪类为更多情况添加了使用css操作的可能，伪元素则是为dom元素使用css增加并操作提供了可能。善用css选择器，会有不一样的感悟~
相关源码地址：html5css3特性实现
写的很简陋，仍有一定优化方法，先留坑。
网友评论