checkbox与lable标签，css设置点击勾选效果

css

.ci-check-lable{
    position: relative;
}
.ci-check-lable input{
    position: absolute;
    left: -9999px;
}
.ci-check-lable i {
    position:relative;
    display:inline-block;
    width: 16px;
    height: 16px;
    outline: 0;
    border: 1px solid #ccc;
    border-radius: 50%;
    background: transparent;
}
.ci-check-lable input[type=checkbox]:checked + i {
    border: 1px solid #00aaee;
    background-color: #00aaee;
}
.ci-check-lable input[type=checkbox]:checked + i:after {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    margin-top: -3px;
    margin-left: -5px;
    -webkit-transform: rotate(-53deg);
    transform: rotate(-53deg); 
    width: 8px;
    height: 3px;
    border: 1px solid #fff;
    border-top: 0;
    border-right: 0;
}

 

html

<label class="ci-check-lable">
    <input type="checkbox" v-model="reason"><i></i>绑定银行卡
</label>
 

checkbox放在lable标签里面，点击lable标签里面的文字会让checkbox同时被点击，利用css属性:checked设置勾选背景效果。

转载于:https://www.cnblogs.com/wy90s/p/9809178.html