在网页开发中，我们经常需要对一些选项进行勾选，CSS可以很好地实现这个功能。下面我们来看一下如何使用CSS做一个勾选。
/*HTML代码*/
<input type="checkbox">选择
/*CSS代码*/
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label:before {
content: '';
display: inline-block;
width: 16px;
height: 16px;
margin-right: 5px;
vertical-align: middle;
border: 1px solid #ccc;
background-color: #fff;
}
input[type="checkbox"]:checked + label:before {
content: '\2713';
text-align: center;
line-height: 14px;
font-size: 14px;
color: #fff;
border: none;
background-color: #4CAF50;
}
/*说明*/
1. 首先隐藏原生的checkbox输入框
2. 使用label标签包裹checkbox和文字
3. 给label的:before伪元素添加样式，用于显示勾选框
4. 当checkbox被勾选时，改变:before伪元素的样式，显示勾选符号
5. 在:before中使用Unicode字符，如\2713表示勾选符号 版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
