<div class="check-item">
    <input type="checkbox" class="check-item-in" id="checkbox3">正常复选框
    <label for="checkbox3"></label>
</div>
 
<div class="check-item">
    <input type="checkbox" class="check-item-in" id="checkbox1" checked="checked">复选框checked
    <label for="checkbox1"></label>
</div>
 
<div class="check-item">
    <input type="checkbox" class="check-item-in" id="checkbox2" disabled="true">复选框disableed
    <label for="checkbox2"></label>
</div>

input[type=checkbox] {
    margin-right: 10px;
    cursor: pointer;
    width: 15px;
    height: 15px;
    position: relative;
}
 
input[type=checkbox]:after {
    position: absolute;
    width: 10px;
    height: 15px;
    top: 0;
    content: " ";
    background-color: #fff;
    color: #fff;
    display: inline-block;
    visibility: visible;
    border: 1px solid grey;
    padding: 0 3px;
    border-radius: 3px;
}
 
input[type=checkbox]:checked:after {
    background-color: #0f97e7;
    content: "?";
    font-size: 12px;
}
 
input[type=checkbox]:disabled:after {
    width: 10px;
    height: 15px;
    top: 0;
    color: #fff;
    display: inline-block;
    visibility: visible;
    border: 1px solid grey;
    padding: 0 3px;
    border-radius: 3px;
    background-color: #E9E7E3;
    content: "?";
    font-size: 12px;
}