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