input控件的checkbox属性自定义勾选框

思路

1. 首先隐藏input默认勾选框
2. 通过绑定label标签，设置label的样式来设置勾选框

效果

代码

# html中input的checkbox定义，使用for循环创建多个checkbox并绑定到label上
<div class="tab_1" v-for="(i, index) in all_stu_ls">
    <input :id="index" class="tab_1_title" type="checkbox" :value="i['id']" v-model="check_box_ls">
    <label :for="index">{{i.stu_name}}</label>
</div>

# css中首先隐藏默认，再自定义设置label样式

input[type=checkbox]{	# 隐藏默认样式
    visibility: hidden;
}

input[type="checkbox"] + label::before {
    content: "\a0";  /*不换行空格*/
    display: inline-block;
    width: 5vw;  # 设置选框的宽度
    height: 5vw;  # 设置选框的高度
    margin-right: 4vw;	# 选框距离label文字的距离
    margin-left: -2vw;	# 选框拒了左边界的距离
    border-radius: 1vw;	# 选框的圆角属性
    background-color: silver;
    text-indent: 0vw;
    line-height: 5.2vw;	# 涉及对钩的位置
    vertical-align: 0vw;
}

input[type="checkbox"]:checked + label::before {
    content: "\2714";	# 选中时的样式 \2713是较细的对钩
    color: #FFFFFF;		# 样式的颜色
    background-color: yellowgreen;	# 选中的背景色
}

.tab_1 label{	# label字体的样式
    width: 60vw;
    height: 16vw;
    font-family: PingFangSC-Regular;
    font-size: 4.3vw;
    color: #000000;
}

注意：1、其中的标签，文字的大小，单位需要根据自己的需求调整。2、文中的注释并不是使用html和css合法注释，需要自己手动删除。