更改checkbox原始样式，写出自己喜欢的样式

现在的在做项目的时候，ui经常会设计出特有的样式的，这里使用的方式都是CSS3的伪类方式解决的

1.第一方法：就是用背景图的方式当做checked的时候的样式的

body：：：

利用background用图片代替checkbox效果

解释：这里使用的方式的span包裹的input和label的标签，这里要注意的一点就是 input中的id名字要和label的名字要一样，不然效果是不会出来的。

css：

#container {height:150px;width:150px;}
#container span {position: relative;}
#container .inputCheck {position: absolute;width: 20px;height: 20px;		
						visibility: hidden;}
#container .inputCheck+label {display: inline-block;width: 20px;height: 20px;
							background: red;}
#container .inputCheck:checked+label {background: url(checkbox.png) no-repeat center center;background-size:20px 20px;} 

解释：这里最重要的一点就是，把checkbox的原始样式取消，用新的样式来代替的，

visibility: hidden; 就是取消样式的。其他的css代码不做多解释的，那个复选框最初的样式是红色的，然后checked的样式checkbox.png的图片的。图片展示：见1.png

第二种方式：

css代码：

这种方式我是添加一个content的内容，通过定位的方式来调整，然后通过旋转的方式来倾斜，在吧一个拐角的2个边透明，另外2个边加上颜色，这样效果就出来的

图片展示：2.png

第三种方式代码和方法一是一样的 

css在checked时候的代码要修改一下的

background: url('/images/common/icon.svg') no-repeat center center #ff7a4f;

这里我使用svg的图片的，在后面加个颜色效果就出来的
图片展示：3.png