修改原生checkbox样式。
效果
原理
1.利用CSS3属性 appearance。
该属性（强制）更改（改变）默认（原生）样式。
Firefox 支持替代的 -moz-appearance 属性；Safari 和 Chrome 支持替代的 -webkit-appearance 属性；IE不支持该属性。
所以可以利用该属性取消checkbox的原生样式。
2.利用:checked选择器
当checkbox被选中的时候改变样式。
3. :after选择器 + content属性
:after选择器向元素之后插入内容。
我们再利用text-aligen和line-height让内容正居中就行了。
源码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>checkbox</title><style>input {width: 16px;height: 16px;margin-top: 0;background-color: #fff; border: 1px solid #c9c9c9;border-radius: 2px;color: #fff;text-align: center;line-height: 15px;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;outline: none;}input:hover {border-color: #43adea;}input:checked {color: #fff;background-color: #43adea;border: 1px solid #43adea;}input:after {content: "✔";}</style></head><body><input type="checkbox"><input type="checkbox"></body></html>
