Что нужно подставить вместо ~?

Question

[rootnoroot]

В общем делаю форму
есть label, которые при фокусе на input должны отъезжать вверх
но проблема в том, что форма в cf7 и все inputы завернуты в spanы
так что стили не срабатывают

.user-box input:focus ~ label,
.user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #03e9f4;
  font-size: 12px;
}

<div class="user-box">
      <span><input type="text" name="" required=""></span>
      <label>Username</label>
    </div>

Что нужно подставить вместо ~ в данном случаи? т.к не работает

Answer 1

[Rsa97]

С фокусом легко:
.user-box span:focus-within ~ label,
С валидностью хуже, тут только через :has, работающий не во всех браузерах.
.user-box span:has(input:valid) ~ label

Answer 2

[godsplane]

в данном случае css не поможет

Comments

[Вадим]

Ну это не совсем правда.

rootnoroot, если браузерная поддержка позволяет, то можно воспользоваться :has.
.user-box:has(input:focus) label {}