CSS常用选择器记录-checkbox被选择

input[type=checkbox]

• 　　用户被勾选

input[type=checkbox]:checked+label2:after

• input框如果被用户勾选了，其后面的label元素会有相应的样式变化
• +是兄弟选择器（sibling combinator），来组合前后两个选择器，选择器中的元素有相同的父元素，并且第二个必须紧随着第一个出现。

 <input type="checkbox" class="chk" id="chk">
 <!-- <label> 标签的 for 属性应当与相关元素的 id 属性相同。 -->
 <label for="chk">同意xx协议</label>

 

.protocol_check {
    width: 20px;
    height: 20px;
    position: relative;
    margin-left: 1%;
}

.protocol_check input[type=checkbox] {
    visibility: hidden;
}

.protocol_check label {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    background: url(../img/protocol_unselect.png) no-repeat 10px center;
    background-size: 20px auto;
}

.protocol_check label2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    background: url(../img/protocol_unselect.png) no-repeat 10px center;
    background-size: 20px auto;
}

.protocol_check label2:after {
    opacity: 0;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    background: url(../img/protocol_select.png) no-repeat 10px center;
    background-size: 20px auto;
}

.protocol_check input[type=checkbox]:checked+label2:after {
    opacity: 1;
}

.protocol_check label:after {
    opacity: 0;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    background: url(../img/protocol_select.png) no-repeat 10px center;
    background-size: 20px auto;
}

.protocol_check input[type=checkbox]:checked+label:after {
    opacity: 1;
}