<!--已选-->
<label class="checkBox-item" ><input type="checkbox" checked=""><p>允许添加账号</p></label>
<!--未选-->
<label class="checkBox-item" ><input type="checkbox"><p>允许使用账号管理</p></label>
<!--已选 disabled -->
<label class="checkBox-item" ><input type="checkbox" checked="" disabled=""><p>允许添加账号</p></label>
<!--全选 只选中部分 样式 重点在于:alonestate="true" 属性值 -->
<label class="checkBox-item" ><input type="checkbox" alonestate="true"><p>全选</p></label>
/*复选框*/
.checkBox-item {
min-height: 32px;
display: flex;
align-items: center;
line-height: 18px;
color: #666;
cursor: pointer;
}
.checkBox-item input {
width: 16px;
height: 16px;
flex: 0 0 16px;
display: inline-block !important;
margin-right: 8px;
background-color: #fff;
border: 1px solid #D9D9D9;
border-radius: 4px;
transition: background ease 1ms;
-webkit-appearance: none;
-webkit-user-select: none;
user-select: none;
position: relative;
cursor: pointer;
}
.checkBox-item input:hover,
.checkBox-item input:active {
border-color: #1E62EC;
}
.checkBox-item input:checked {
border-color: #1E62EC;
background-color: #1E62EC;
color: #fff;
}
.checkBox-item input:checked:after {
content: '';
top: 4px;
left: 3px;
position: absolute;
background: transparent;
border: #fff solid 1px;
border-top: none;
border-right: none;
height: 3px;
width: 7px;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.checkBox-item input:disabled {
background-color: #F0F0F0;
border-color: #D9D9D9;
}
.checkBox-item input:checked:disabled {
border-color: #D9D9D9;
background-color: #D9D9D9;
}
/*复选框 全选 局部选中样式 */
.checkBox-item input[aloneState="true"] {
border-color: #1E62EC;
background-color: #fff;
}
.checkBox-item input[aloneState="true"]:before {
content: '';
height: 8px;
width: 8px;
top: 3px;
left: 3px;
position: absolute;
background: #1E62EC;
border-radius: 1px;
}