效果图如下
未选中效果: 选中效果:
废话不多说,直接上干货:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>复选框</title>
</head>
<style type="text/css">
.checkBox{
margin: 20px auto;
width: 50%;
text-align: center;
}
.checkBox input[type="checkbox"]{
display: none;
}
.checkBox label{
width: 20px;
height: 20px;
border: 1px solid black;
display: inline-block;
color: blue;
}
.checkBox input[type="checkbox"]:checked + label{
color: red;
font-weight: bold;
}
</style>
<body>
<div class="checkBox">
<input type="checkBox" id="checkbox-1" />
<label for="checkbox-1">√</label>
<span>复选框</span>
</div>
</body>
</html>