CSS 自定义checkbox样式

发布时间 2023-09-07 10:28:13作者: 邢帅杰
小星星
/**checkbox 样式 begin*/
.chkAuto {
    width: 10px;
    height: 10px;
}

.auto_check input[type="checkbox"] + label::before {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    border: .064rem solid #1890ff;
    margin-right: .213333rem;
    box-sizing: border-box;
}

.auto_check input[type="checkbox"]:checked + label::before {
    background-color: #1890ff;
    background-clip: content-box;
    padding: .149333rem;
    box-sizing: border-box;
}

.auto_check input[type="checkbox"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}
/**checkbox 样式 end*/

html

<span class="auto_check">
    <input type="checkbox" id="cboAutoSubmit" class="chkAuto" />
    <label for="cboAutoSubmit">自动提交</label>
</span>