- 通过+相邻兄弟选择器模拟父选择器,让子元素状态变更影响父元素样式
//效果为 input聚焦的时候labelbox盒子边框为蓝色,失焦为黑色
<div class="fatherbox">
<input class='box' placeholder="请输入提现金额" />
<label class="labelbox"></label>
</div>
<style>
.fatherbox{
position: relative;
width: 200px;
}
.labelbox {
position: absolute; left: 0; right: 0; top: 0; bottom: 0;
/* 必须在输入框的下面 */
z-index: -1;
border: 1px solid black;
}
.box:focus + .labelbox {
border: 1px solid blue;
}
</style>
待续。。。