Почему css срабатывает только при required в форме?

Question

[Za Za]

Чет не понимаю как заставтить данный эфект работать без обязательного пареметра к заполнению.

Answer 1

[Антон]

Потому что оно так работает.
Следите JS'ом событие input и проверяйте, заполнено ли поле...Если заполнено, добавляете класс со стилями аналогичными focus и active

Comments

[Za Za]

теперь понятно!

[sinneren]

Михаил Лебедев, учтите, что этого недостаточно, если вы решите программно изменить значение после загрузки страницы (через .val()). Вам нужно будет еще запустить .trigger('input').

Answer 2

[sinneren]

Потому что состояние валидности(valid) происходит только при required для текстовых полей. Спецификация.
Для полей tel, number, и других специфичных происходит проверка типа, потому там сработает. В тексте какая вам проверка-то, потому флаг required заставляет проверить 1+ символов на наличие, потому и работает. Сам на днях мучался... Мб попробовать pattern применить с регуляркой на любой символ
в принципе, если развернуть стили, к не required применить паттерн типа такого:`pattern="[*]{1,}"` и применить к `input[type="text']:not([required])` то тоже будет работать.

Comments

[Za Za]

чуть ближе к пониманию происходящего ))

Answer 3

[Владислав Лысков]

https://codepen.io/Vlatqa/pen/vYXMeRj

Comments

[Za Za]

значение возвращается при заполненом поле

[Владислав Лысков]

Михаил Лебедев, ничего не понял

[sinneren]

Владислав Лысков, введите в свой инпут и уберите фокус. лейбл отъедет назад. В примере автора с required лейбл сохраняет положение при введенном тексте. ТС хочет как в marerial ui.
по англицки называется это всё floated label

[Владислав Лысков]

sinneren, понял, спасибо