Как сделать такой INPUT?

Question

[webe]

https://oauth20.mos.ru/sps/login.jsp

Там есть Input, по клику надпись смещается, как такое сделать?

Почему-то стили вообще не меняются при клике, либо я как-то не так смотрю.

Answer 1

[Stimulate]

Меняются

label.error, .b-select:focus~.b-form__placeholder, .b-select.b-input_not-empty~.b-form__placeholder, .b-select.valid~.b-form__placeholder {
  font-size: 11px;
  top: 4px;
  font-family: 'MCW XX Light Regular';
}

Answer 2

[Павел Антонов]

Вариантов много, самый простой способ накидал
Можно использовать js, можно без него, все зависит от конкретной верстки и требований. В моем варианте просто css изменяет font-size и line-height при фокусе.

Можно изменять top относительно родительского блока, можно играться через transform: scale() в общем суть думаю понятна..

Answer 3

[snap44]

google => "input floating labels"