Как создать динамический заполнитель для страницы входа?

Question

На текущей странице входа в GMail текст-заполнитель «Электронная почта или телефон» уменьшается в размере и перемещается в верхний левый угол поля в фокусе.Как добиться чего-то подобного с помощью CSS и / или JS?

Answer 1

Простой и легкий пример для вас:

label {
  margin:20px 0;
  position:relative;
  display:inline-block;
}
  
span {
  padding:10px;
  pointer-events: none;
  position:absolute;
  left:0;
  top:0;
  transition: 0.2s;
  transition-timing-function: ease;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  opacity:0.5;
}

input {
  padding:10px;
}

input:focus + span, input:not(:placeholder-shown) + span {
  opacity:1;
  transform: scale(0.75) translateY(-100%) translateX(-30px);
}

/* For IE Browsers*/
input:focus + span, input:not(:-ms-input-placeholder) + span {
  opacity:1;
  transform: scale(0.75) translateY(-100%) translateX(-30px);
}

<label>
  <input placeholder=" ">
  <span>Placeholder Text</span>
</label>

Answer 2

Прежде всего, добро пожаловать в StackOverflow!

Это называется «плавающие метки», и это может быть достигнуто с помощью только CSS (что может оказаться немного сложным, если вы не очень знакомы спсевдоселекторы, такие как: focus и: empty) или с использованием небольшого количества JS, что может быть немного проще.

Некоторые примеры можно посмотреть здесь: https://css -трюки.ком / поплавковой этикетка-CSS /