用 input 伪元素做一个复选框

这个方法有兼容性，ie 不兼容

html

<div class="real_input">
    <!--复选框-->
    <label class="checkBox"><input type="checkbox"></label>
</div>

css

/*复选框*/
.real_input{
    /*清除复选框的样式，和重新设置样式*/
    input[type='checkbox']{
        appearance:none;
        outline: none;
        width: 20px;
        height: 20px;
        background-color: #fff;
        border: 1px solid #c9c9c9;
        border-radius: 2px;
        cursor: pointer
    }
    /*点击复选框后的样式*/
    .checkBox input[type=checkbox]:checked::before{
        display: block;
        width: 20px;
        height: 20px;
        content: "\2713";
        text-align: center;
        font-size: 14px;
        background: #ff733c;
        color: #fff;
    }
}

　　

转载于:https://www.cnblogs.com/Hajar/p/11506913.html