<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>checkbox样式</title>
<style>
.el-checkbox{
display: inline-block;
position: relative;
font-size: 14px;
font-weight: 500;
color: #606266;
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.el-checkbox-box{
display: inline-block;
width: 14px;
height: 14px;
border: 1px solid #dcdfe6;
vertical-align: middle;
border-radius: 2px;
}
.el-checkbox-box::after{
width: 3px;
height: 7px;
content: '';
border: 1px solid #fff;
display: inline-block;
border-top: 0;
border-left: 0;
position: absolute;
top: 6px;
left: 6px;
transform: rotate(45deg);
}
.el-checkbox-origin[disabled]:checked + .el-checkbox-box::after{
border-color: #c0c4cc;
}
.el-checkbox-origin{
outline: none;
opacity: 0;
position: absolute;
left: -999px;
}
.el-checkbox-text{
display: inline-block;
line-height: 19px;
vertical-align: middle;
padding: 2px;
}
.el-checkbox-origin:checked + .el-checkbox-box{
background-color: #409eff;
border-color: #409eff;
}
.el-checkbox-origin[disabled]:checked + .el-checkbox-box{
background-color: red;
border-color: green;
}
.el-checkbox:hover .el-checkbox-box{
border-color: #409eff;
}
/*禁用的状态，注意需要和input里的disabled=disabled进行配合使用*/
.el-is-disabled{
cursor: not-allowed;
}
.el-is-disabled .el-checkbox-text {
color: #c0c4cc;
}
.el-is-disabled:hover .el-checkbox-box{
border-color: #dcdfe6;;
}
</style>
</head>
<body>
<!-- 正常状态 -->
<label role='checkbox' class='el-checkbox'>
<span>
<input type="checkbox" class='el-checkbox-origin'>
<span class='el-checkbox-box'></span>
</span>
<span class='el-checkbox-text'>复选框1</span>
</label>
<!-- 选中状态 -->
<label role='checkbox' class='el-checkbox'>
<span>
<input type="checkbox" class='el-checkbox-origin' checked>
<span class='el-checkbox-box'></span>
</span>
<span class='el-checkbox-text'>复选框2</span>
</label>
<!-- 禁用状态 -->
<label role='checkbox' class='el-checkbox el-is-disabled'>
<span>
<input type="checkbox" class='el-checkbox-origin' disabled=disabled>
<span class='el-checkbox-box'></span>
</span>
<span class='el-checkbox-text'>复选框3</span>
</label>
<label role='checkbox' class='el-checkbox el-is-disabled el-is-checked'>
<span>
<input type="checkbox" class='el-checkbox-origin' disabled=disabled checked>
<span class='el-checkbox-box'></span>
</span>
<span class='el-checkbox-text'>复选框3</span>
</label>
</body>
</html>
效果图
