自定义一个多选框样式

<!-- html部分 -->
<label class="remember-pwd-checkbox">
    <input type="checkbox" v-model="isRememberPwd">
    <div class="show-box" :style="{'background':`${checkedColor}`}"></div>
</label>

// vue的js部分
computed:{
    checkedColor(){
        if(this.isRememberPwd == true){
            return 'skyblue'
        }else{
            return 'white'
        }
    }
}

// css部分
label {
    position: relative;
    cursor: pointer;
 
    input {
        cursor: pointer;
    }
 
    input:checked + .show-box {
        background: #ff6a00;
        border: 1px solid white;
        border-radius: 2px;
    }
 
    .show-box {
        position: absolute;
        top: 0;
        left: 0;
        width: 15px;
        height: 15px;
        border-radius: 2px;
        border: 1px solid #d8d8d8;
        background: white;          // 这里取个巧，与下面颜色一样而已
 
        &:before { // 使用了 absolute 所以无所谓是 before 还是 after
            content: ''; // 空白内容占位，当做盒模型处理，见下面
            position: absolute;
            top: 2px;
            left: 5.5px;
            width: 3px; // 勾的短边
            height: 8px; // 勾的长边
            border: solid white; // 勾的颜色
            border-width: 0 2px 2px 0; // 勾的宽度
            transform: rotate(45deg); // 定制宽高加上旋转可以伪装内部的白色勾
        }
    }
}