Как сделать input со смещающимся текстом?

Question

[Дмитрий Самойлов]

Здравствуйте, нужно сделать подобный интуп, где текст отьезжает, когда нажимаешь на него, но не понимаю как он работает. Нашел вариант material design, но он для ангуляра, а хотелось бы на обычном css такой сделать, либо с использованием js, делал уже кто то его? не могу найти похожих вариантов

Comments

[Froggyweb]

ангуляр там каким боком?
делаешь label абсолютом, про фокусе двигаешь вверх или куда надо, меняешь цвет и пр атрибуты. можно добавить transition (нужно) для плавности

[Дмитрий Самойлов]

Froggyweb, не знаю, почему то на него материал дизайн делает
Input | Angular Material, но я уже нашел такую кнопку с обычным css, так что нормально

[Kovalsky]

"material design, но он для ангуляра" - md это большой набор ui правил и ux суеверий, он используется очень много где. И само собой реализации md существуют для всех известных фреймворков, а не только для angular. И без фреймворков он тоже доступен в уже готовом виде. Вот например реализация на оф сайте мд - https://material.io/components/text-fields . Открывайте инспектор, смотрите как реализован инпут. Или вот реализация на материалайзе - https://materializecss.com/text-inputs.html

[Равиль]

Основная идея

label {
  font-size: 18px;
  transition: 0.2s ease all;
  pointer-events: none;
}

input:focus ~ label {
  font-size: 14px;
  transform: translateY(-20px);
}

Answer 1

[Юрий]

В пятом Bootstrap сделано на чистом CSS: https://v5.getbootstrap.com/docs/5.0/forms/floatin...

Answer 2

[DrWeyber]

Вам нужно инпут завернуть в обёртка, с position relative, затем сделать span с этим текстом, и на position absolute его разместить где вас нужно, затем на фокус изменять css свойства. Но без js тут не обойтись мне кажется