css 自定义复选框CSS

Posted 2021-05-13

input[type="checkbox"] { display:none; }
input[type="checkbox"] + label { margin-left: 52px; }
input[type="checkbox"] + label span {
    display: inline-block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    vertical-align: middle;
    margin: -1px 15px 0 -52px;
}
input[type="checkbox"]:checked + label span {
    background-color: #cccccc;
    border-color: #cccccc;
}