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; }