input控件的checkbox屬性自定義勾選框

思路

    首先隱藏input默認勾選框
    通過綁定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合法注釋，需要自己手動刪除。
---------------------
作者：MrNoboday
來源：CSDN
原文：https://blog.csdn.net/MrNoboday/article/details/83067737
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！