Скрыть div при не пустом input?

Question

[barakuda1]

Дело в том, что форма с полями для ввода подгружается через js
Из-за этого, не получается вовремя отловить событие для изменения значений в input, чтобы скрыть div (label).
Получается так, что при вводе значения в input, у меня накладывается надпись.
Можно ли через CSS скрыть div (label), если в input что-то введено?



Как видно на скриншоте, накладывается текст "Телефон" под введенным номером - его нужно скрыть.

Comments

[Ankhena]

https://codepen.io/AnnaSummer/pen/xxYygyK
Адаптируйте появление и поведение под себя.

Answer 1

[Alexander3928]

(твой инпут):not(:placeholder-shown) ~ (твой класс для стилей) {
   стили
}

Comments

[barakuda1]

Структура input и того мешающего текста:

<div class="b24-form-control-container b24-form-control-icon-after">
  <input name="phone" autocomplete="tel" type="tel" class="b24-form-control" im-insert="true">
  <div class="b24-form-control-label"> Телефон <span class="b24-form-control-required" style="display: none;">*</span>
  </div>
 
  <div class="b24-form-control-alert-message" style="display: none;"></div>
</div>

К сожалению, структуру нет возможности поменять.
Вписал в CSS следующее:

.b24-form-control:not(:placeholder-shown) + .b24-form-control-label {
  opacity: 0;
}

Скрылись эти надписи немного не так. При пустом значении, они должны показываться, но их нет.