Как можно ограничить стиль?

Question

[Space]

Извиняюсь за кривой заголовок. В этом шаблоне поля очень интересно сделаны. Нажал на поле, лейбел сместился наверх. Я смог это реализовать. Но если я что-нибудь введу в поле, то лейбел все равно вернется на место и получается наложение.

В примере по ссылке этого "артефакта" нет. Как можно это исправить, куда копать? Это на уровне css или все же на js(удалял все js в принципе и все равно работало)?

Comments

[Сергей Сергей]

Здесь надо делать один стиль для метки при фокусе и заполненном поле. заполненное поле определяется скриптом, и ставится какой-то класс на метку. Это решение "в лоб".
Ну или input[content=""] и псевдоэлементная метка, если такое возможно.

Answer 1

[Михаил Чирский]

Сергей Сергей все верно указал, заполненое поле лучше скриптом определять и задавать класс, нарпимер в том же MDL так и сделано, это кстате от них и пошло. Ну а focus можно и через стили получить :focus ~ label к примеру так, ну и конечно в вашем случае label должен быть после input, или вы не отследите :focus, :checked и остальные селекторы

Answer 2

[Maxim Nepritimov]

Сделай условие - если поле не пустое, не возвращать лейбл.