纯CSS实现复选框自定义样式

1、去掉默认样式2、第一种方式：用图片实现3、第二种方式：用字体图标实现

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;}