实现效果
未选中状态 & 选中状态
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Checkbox</title>
<meta charset="utf-8">
<style type="text/css">
.op {
position: relative;
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid #3cc5b6;
cursor: pointer;
}
input[type="checkbox"] {
opacity: 0;
}
input[type="checkbox"]:checked + i{
width: 12px;
height: 12px;
display: inline-block;
position: absolute;
left: 0;
top: 0;
background-color: #3cc5b6;
}
input[type="checkbox"]:checked + i:after {
content: '';
display: inline-block;
width: 5px;
height: 10px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
background-color: #3cc5b6;
transform: rotate(230deg);
position: absolute;
left: 3px;
top: -1px;
}
</style>
</head>
<body>
<label class="op">
<input type="checkbox" value="like">
<i></i>
</label>
</body>
</html>