Проблемка с input при required. Что это?

Question

[Heorhii]

Всем хай. Всплыла небольшая непонятная мне проблема с полями, по ссылке можно увидеть код, собственно проблема в том что нижнее поле не функционирует как надо, разница от верхнего только в отсутствии required в input. Можно узнать в чем подвох, почему так?
Ссылочка

Answer 1

[Eugene Chefranov]

Не работает потому, что браузер во втором случае не проверяет правильность заполнения поля

Отсюда удалите

input:focus~label,
input:valid~label {
  top: -20px;
  font-size: 14px;
  color: #5264AE;
}

вот это
,input:valid~label

Получится такое

input:focus~label {
  top: -20px;
  font-size: 14px;
  color: #5264AE;
}

Comments

[Heorhii]

Пробовал, беда в том что когда поле заполнено, если убрать фокус то label упадет на поле, поверх введенных данных

[Eugene Chefranov]

Георгий Городенко, тогда сделайте второе поле required, он же вроде как тоже обязательное

[Heorhii]

Eugene Chefranov, это пример чисто, на деле у меня горсть этих полей ненужных

Answer 2

[snap44]

Вот это
input:valid~label
Замените на это
input:valid:not(:empty)~label
jsfiddle.net/6ks0gem1/7

Comments

[snap44]

Упс, ошибочка. Сейчас поковыряюсь в своих сниппетах, я делал это на css.

[Heorhii]

snap44, :D