1、效果图
2、代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>checkbox</title><style type="text/css">label {width: 20px;font-size: 12px;cursor: pointer;}label i {display: inline-block;width: 18px;height: 16px;background-image: url("/imgs/tick-before.png");background-repeat: no-repeat;background-size: 18px 16px;}input[type="checkbox"],input[type="radio"] {display: none;}input[type="radio"]+i {border-radius: 7px;}input[type="checkbox"]:checked+i,input[type="radio"]:checked+i {background-image: url("/imgs/tick-after.png");}input {display: inline-block;width: 18px;height: 16px;background-image: url("/imgs/tick-before.png");background-size: 18px 16px;}</style>
</head><body><label><input type="checkbox" name="check-protocol" checked><i></i></label><span>我已阅读并完全接受服务协议</span>
</body>
</html>
3、总结
这里实现的核心是input[type='checkbox']:checked{}这属性，当checkbox被选中时的样式。（CSS3的UI选择器）
![P2341 [HAOI2006]受欢迎的牛 强连通](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
