效果图:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS美化复选框</title>
<style>
/*把原来的复选框给隐藏*/
.chk_1 {
display: none;
}
/*美化复选框其把握二种状态：勾选与未勾选二种的样式就行*/
.chk_1 + label {
display: inline-block;
position: relative;
color: #aaa;
margin-left: 20px;
padding-left: 65px;
}
.chk_1:checked + label {
color: #000;
}
.chk_1 + label::before {
content: '';
position: absolute;
left: 5px;
top: 0px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
z-index: 2;
transition: all .3s;
}
.chk_1:checked + label::before {
left: 37px;
}
.chk_1 + label::after {
content: 'OFF';
position: absolute;
top: -3px;
left: 0;
width: 60px;
height: 25px;
border-radius: 25px;
background: #ED6F6F;
color: #fff;
line-height: 25px;
padding-left: 28px;
font-size: 12px;
transition: all .3s;
}
.chk_1:checked + label::after {
content: 'ON';
padding-left: 10px;
background: #4FB845;
}
</style>
</head>
<body>
<input type="checkbox" name="chb" id="chb" value="comments" checked="checked" class="chk_1"/>
<label for="chb">复选框美化 - 开关样式</label>
</body>
</html>
-End-
.jpg)
.jpg)
