自定义的复选框checkbox
1.fontawesome
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>checkbox</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
.checkItem {
display: inline-block;
padding:0px 10px;
cursor: pointer;
}
.checkItem > label {
cursor: pointer;
}
.checkItem > i {
width: 16px;
height: 16px;
}
</style>
</head>
<body>
<div class="checkItem">
<i class="fa fa-square-o" onclick="btncheckbox(this)"><input type="checkbox" style="display: none;" id="checkbox1" value="0"></i>
<label for="checkbox1">标段一</label>
</div>
<div class="checkItem">
<i class="fa fa-square-o" onclick="btncheckbox(this)"><input type="checkbox" style="display: none; " id="checkbox2" value="1"></i>
<label for="checkbox2">标段二</label>
</div>
<div class="checkItem">
<i class="fa fa-square-o" onclick="btncheckbox(this)"><input type="checkbox" style="display: none;" id="checkbox3" value="2"></i>
<label for="checkbox3">标段三</label>
</div>
<div class="checkItem">
<i class="fa fa-square-o" onclick="btncheckbox(this)"><input type="checkbox" style="display: none;" id="checkbox4" value="3"></i>
<label for="checkbox4">标段四</label>
</div>
<script>
function btncheckbox(dom) {
//console.log(dom);
if(dom.classList.contains('fa-square-o')) {
dom.classList.remove('fa-square-o');
dom.classList.add('fa-check-square-o');
}else {
dom.classList.add('fa-square-o');
dom.classList.remove('fa-check-square-o');
}
console.log($('.fa-check-square-o'));
}
</script>
</body>
</html>
运行结果:
2.css3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3美化checkbox</title>
<style>
label.bui-checkbox-label input[type="checkbox"]{
visibility: hidden;
opacity: 0;
}
label.bui-checkbox-label .bui-checkbox{
display: inline-block;
position: relative;
width: 13px;
height: 13px;
border: 1px solid #ddd;
background-color: #fff;
vertical-align: -2px;
margin-right: 5px;
}
label.bui-checkbox-label input[type="checkbox"]:checked + .bui-checkbox:after{
position: absolute;
content: "";
width:8px;
height: 4px;
border-left:2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg) translate(-50%,-50%);
left:50%;
}
label.bui-checkbox-label input[type="checkbox"]:checked + .bui-checkbox {
background-color: #00a8fe;
border: 0px;
width: 14px;
height: 14px;
}
</style>
</head>
<body>
<label class="bui-checkbox-label">
<input type="checkbox" name="sex"><i class="bui-checkbox"></i>男
</label>
<label class="bui-checkbox-label">
<input type="checkbox" name="sex"><i class="bui-checkbox"></i>女
</label>
</body>
</html>
运行结果:
switch开关自定义css3制作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>switch开关自定义css3制作</title>
<style>
.switch-component {
position: relative;
width: 60px;
height: 30px;
background-color: #dadada;
border-radius: 30px;
border: none;
outline: none;
-webkit-appearance: none;
transition: all .2s ease;
}
.switch-component::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: #fff;
border-radius: 50%;
transition: all .2s ease;
}
/*checked状态时,背景颜色改变*/
.switch-component:checked {
background-color: #00E266;
}
/*checked状态时,按钮位置改变*/
.switch-component:checked::after {
left: 50%;
}
</style>
</head>
<body>
<input class='switch-component' type='checkbox'>
</body>
</html>
运行结果: