Задать вопрос
@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>


Что нужно подставить вместо ~ в данном случаи? т.к не работает
  • Вопрос задан
  • 67 просмотров
Подписаться 1 Простой Комментировать
Решения вопроса 1
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
С фокусом легко:
.user-box span:focus-within ~ label,
С валидностью хуже, тут только через :has, работающий не во всех браузерах.
.user-box span:has(input:valid) ~ label
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
godsplan
@godsplan
в данном случае css не поможет
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы