一、input与lable的绑定
二、显示隐藏
三、伪类的使用
代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input{
display:none;
}
label {
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid #333;
border-radius:10px;
position: relative;
}
label::after {
cursor: pointer;
position: absolute;
content: '';
}
input:checked+label::after{
width:20px;
height:10px;
border: 2px solid red;
border-top: none;
border-right: none;
transform: rotate(-45deg);
top:50%;
margin-top:-8px;
left:50%;
margin-left:-10px;
opacity: 1.0;
}
</style>
</head>
<body>
<input type="checkbox" id="checkbox">
<label for="checkbox"></label>
</body>
</html>
