css - 通过关注输入来改变跨度的风格

Question

我想通过关注文本输入来显示“测试”这个词。（当文本输入获得焦点文本的 z-index 更改为 0 时）但它不起作用。（使用css。）我的代码就在这里：

.text{
        position: absolute;
        z-index: -1;

    }
    .main{
        background: #ababab;
    }
    .input-textbox input:focus + span {
        z-index: 0;
    }
<div class="main">
    <div class="textbox">
        <input type="text" class="input-textbox">
        <span class="text">test</span>
    </div>
</div>

Answer 1

选择器错误，改成如下

.input-textbox:focus + span {
    z-index: 0;
}

这是演示

Answer 2

试试这样的选择器......

input.input-textbox:focus + span {
        z-index: 0;
}