checkbox和radio的自定义选择框

直接开门见山，checkbox和radio都是HTML自带的表单控件， 对象代表一个 HTML 表单中的 一个选择框。说白了就是个选择框，这个边框的有特性的：
1、自带margin值：margin：3px 3px 3px 4px，常见的width：13px，height：13px，
2、不能设置background等属性（具体 有多少不支持的css样式，没有测试过），所以特别是选中的样式，就很难改变的
3、width和height只设置一个固定的像素值的时候，显示边框的区域是不会改变的，但是占据的位置是会改变的（举例说明：只设置height:100px;显示的边框大小一般还是13X13的边框，但是F12一看，占据的位置却是13X100，同时会扩大选框的范围）

如何改变样式呀？本身太硬，可以动用周边呀，label的for属性会和指定ID的input标签结成生死兄弟，荣辱与共，点击label，可以切换checked属性，但是checkbox的选框太丑了（呆在家里把，display：none，别出来吓人），让label这支持所有标签属性的在外面把；
html：


css
input[type=”checkbox”] {
display: none;
}
label {
position: relative;
display: inline-block;
width: 30px;
height: 30px;
background: url(images/checkboxbg.jpg) no-repeat 0 0;
background-size: cover;
transition:all 1s ease;
}
/如何好改变的关键/
/* checked 状态下的*/
input[type=”checkbox”]:checked+label {
background-position: 0 -60px;
}

方便起见，如没有严格的兼容性问题，label：after或者before，充当选择的样式切换，不影响，label的绑定效果