@webe
frontend

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

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

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

Почему-то стили вообще не меняются при клике, либо я как-то не так смотрю.
  • Вопрос задан
  • 198 просмотров
Решения вопроса 2
Stimulate
@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';
}
Ответ написан
Комментировать
freislot
@freislot
Frontend-разработчик
Вариантов много, самый простой способ накидал
Можно использовать js, можно без него, все зависит от конкретной верстки и требований. В моем варианте просто css изменяет font-size и line-height при фокусе.

Можно изменять top относительно родительского блока, можно играться через transform: scale() в общем суть думаю понятна..
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
snap44
@snap44
Фыр!
google => "input floating labels"
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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