Как задать стиль элементу после input:focus если input завернут в div?

Всем привет, подскажите пожалуйста как лучше поступить в подобной ситуации: Есть поле формы
HTML
<div class="main-page-form-group">
				<input type="text" required>
				<span class="highlight"></span>
				<span class="bar"></span>
				<label>Введите имя</label>
			</div>

Предположим на label я могу применить стили следующим образом при активном состоянии input'а

CSS

.main-page-form-group input:focus ~ label, 
.main-page-form-group input:valid ~ label {
  top:-20px;
  font-size:14px;
  color: #91a7d0;
}

Когда я интегрировал в contact-form-7, получилась ситуация следующая:

HTML

<div class="main-page-form-group">
    <span class="wpcf7-form-control-wrap text-474">
        <input name="text-474" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required <b>main-page-input-field</b>" aria-required="true" aria-invalid="false" type="text"></span> 
        <span class="highlight"></span> 
        <span class="bar"></span>
        <label>Введите имя</label>
</div>


Тоесть Родственность (~)
CSS
.main-page-input-field:focus ~ label, .main-page-input-field:valid ~ label {
  top:-20px;
  font-size:14px;
  color: #91a7d0;
}


уже не будет работать.

Вопрос как стилизовать label при активных псевдоселекторах?
  • Вопрос задан
  • 772 просмотра
Пригласить эксперта
Ответы на вопрос 1
webrevenue
@webrevenue
Веб-дизайнер и SEO оптимизатор
.main-page-form-group>span.wpcf7-form-control-wrap>input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required:focus ~ label, .main-page-form-group>span.wpcf7-form-control-wrap>input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required:valid ~ label {
  top:-20px;
  font-size:14px;
  color: #91a7d0;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы