复选框checkbox自定义样式

1、去掉默认样式

	input[type=checkbox]{
	    appearance:none;
	    -moz-appearance:none; /* Firefox */
	    -webkit-appearance:none;
	    //visibility: hidden;
	    cursor: pointer;
	    margin:0;
	}

2、第一种方式：用图片实现

用背景图的方式显示。

	// 初始状态
	input[type=checkbox]{
	   background-image:url("图片路径")；
	}
	// 选中
	input[type=checkbox]:checked{
	   background-image:url("图片路径")；
	}

3、第二种方式：用字体图标实现

不想用图片的话可以使用字体图标。未选中状态其实只有一个方框，可以考虑只用纯css来实现，字体图标也不要。

// 未选中状态
input[type=checkbox]:before{
    display: inline-block;
    font-family:"iconfont" !important;
    content: "\e63a"; 
    color:#999999;
    font-size:14px;
    width: 16px;
    height: 16px;
    padding-top: 1px;
    padding-right: 1px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    vertical-align: middle;
}
// 选中时
input[type=checkbox]:checked:before{
    display: inline-block;
    font-family:"iconfont" !important;
    content: "\e602";
    color:@mainColor;
    font-size:14px;
    width: 16px;
    height: 16px;
    padding-top: 1px;
    padding-right: 1px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    vertical-align: middle;
}