В одной из предыдущих статей мы уже касались темы плавающих плейсхолдеров для полей ввода. Сегодня мы разберем один из вариантов реализации такого визуального эффекта.

Итак, сразу перейдем к коду:

HTML

Создадим базовую разметку для элементов формы

  

    

      
      Email
    
    

      
      Password
    
  

CSS

Теперь определим CSS-свойства элементов формы

div {
  display: flex;
  flex-direction: column-reverse;
  max-width: 20rem;
  margin: 0 auto;
}
input {
  border: none;
  padding: 1rem;
  margin-top: 2rem;
  font-size: 1.6rem;
  border-bottom: 0.1rem solid #bdbdbd;
  outline: none;
}
label {
  padding-left: 1rem;
  color: #bdbdbd;
  transform: translateY(4.8rem);
  transform-origin: left top;
  cursor: text;
  transition: all 0.3s;
}

Наконец, зададим свойства для того, чтобы плейсхолдеры, роль которых выполняют элементы label, перемещались, когда поля ввода получают фокус.

input:focus,
input:not(:placeholder-shown) {
  border-bottom: 0.2rem solid #212121;
}
input:focus ~ label,
input:not(:placeholder-shown) ~ label {
  padding: 0;
  color: #212121;
  transform: translateY(2rem) scale(0.8);
}

Вот и все

Пример можно посмотреть на codepen.

Спасибо за внимание.