最终样式
HTML
<label class="checkbox">
<span class="checkbox-input">
<input type="checkbox" class="checkbox-original">
<span class="checkbox-inner"></span>
</span>
<span class="checkbox-label">全选</span>
</label>
CSS
.checkbox {
color:
cursor: pointer;
display: inline-block;
position: relative;
white-space: nowrap;
text-align: left;
font-weight: 200;
line-height: 20px;
font-size: 14px;
}
.checkbox-input {
margin-right: 20px;
outline: 0;
line-height: 1;
vertical-align: middle;
display: inline-block;
}
/* 鼠标移到选择框时边框变蓝 */
.checkbox-inner:hover {
border-color:
}
.checkbox-inner {
display: inline-block;
border: 1px solid
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-sizing: border-box;
width: 18px;
height: 18px;
background-color:
z-index: 1;
transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);
}
.checkbox-original:checked+.checkbox-inner {
background-color:
}
/* 多选框的勾勾 */
.checkbox-original:checked+.checkbox-inner::after {
box-sizing: content-box;
content: "";
border: 2px solid
border-left: 0;
border-top: 0;
height: 8px;
left: 5px;
position: absolute;
top: 3px;
left: 6px;
-ms-transform: rotate(45deg);
transform: rotate(45deg);
width: 4px;
transition: transform .15s cubic-bezier(.71, -.46, .88, .6) .05s;
-ms-transform-origin: center;
transform-origin: center;
}
/* 原来的多选框隐藏 */
.checkbox-original {
opacity: 0;
outline: 0;
position: absolute;
margin: 0;
width: 0;
height: 0;
}
/* 文字样式 */
.checkbox-label {
margin-left: -20px;
color:
font-weight: normal;
font-size: 14px;
padding-left: 5px;
}