Всплывающий placeholder для формы

11 сент. 2024 г.

3 минуты506 слов

Покажу как сделать всплывающую подсказку — placeholder на чистом HTML и CSS. Стилизую и добавлю смену цвета при валидации поля ввода input в форме.

Функцию всплывающей подсказки будет выполнять <label></label>, а «оригинальный» placeholder мы скроем.

Если лень читать разбор кода, то можете сразу посмотреть верстку на CodePen.

Код

Добавим обертку поля ввода field, а внутри него разместим input и label.

HTML-разметка поля ввода

<div class="field">
  <input name="email" type="email" inputmode="email" class="text-input" id="email" placeholder="Email">
  <label for="email" class="form-popup__label">Email</label>
</div>

Добавим стили.

CSS-стили для поля ввода и placeholder

.field {
  max-width: 780px;
 
  position: relative;
  margin-bottom: 40px;
 
  &:last-child {
    margin-bottom: 0;
  }
}
 
.text-input {
  width: 100%;
  padding: 26px 16px;
  padding-bottom: 16px;
  font-size: inherit;
  color: inherit;
  border: 2px solid #b3b3b3;
  border-radius: 12px;
  background-color: #252525;
  box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.3) inset;
 
  &::placeholder {
    opacity: 0;
  }
}
 
.form-popup__label {
  position: absolute;
  top: 1.2em;
  left: 17px;
 
  color: #a1a1a1;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}
 
.text-input:focus ~ .form-popup__label,
.text-input:not(:placeholder-shown) ~ .form-popup__label {
  font-size: 12px;
  transform: translateY(-0.4em);
}
 
.text-input.valid:focus ~ .form-popup__label,
.text-input.valid:not(:placeholder-shown) ~ .form-popup__label {
  color: #00c2ff;
}
.text-input.error:focus ~ .form-popup__label,
.text-input.error:not(:placeholder-shown) ~ .form-popup__label {
  color: #ff006b;
}
 
.text-input.valid {
  border-radius: 12px;
  border: 2px solid #00c2ff;
  box-shadow: 0px 0px 24px 0px rgba(0, 194, 255, 0.3),
    0px 0px 24px 0px rgba(0, 194, 255, 0.3) inset;
}
 
.text-input.error {
  border: 2px solid #ff006b;
  box-shadow: 0px 0px 24px 0px rgba(255, 0, 107, 0.3),
    0px 0px 24px 0px rgba(255, 0, 107, 0.3) inset;
}

Как управлять плейсхолдером

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

Меняем цвет у placeholder на зеленый

.text-input::placeholder {
   color: green;
}

Разбор кода

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

Скрываем placeholder

.text-input::placeholder {
   opacity: 0;
}

Затем абсолютно позиционируем <label> и задаем стили и координаты таким образом, чтобы он был похож на placeholder.

Скрываем placeholder

.form-popup__label {
  position: absolute;
  top: 1.2em;
  left: 17px;
 
  color: #a1a1a1;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

При фокусе на поле ввода будем менять стили у <label>. Символ ~ позволяет нам обращаться к элементу, который находится после input и на том же уровне, т.е. имеет такого же родителя.

С помощью :placeholder-shown мы можем задать стили, которые будут работать только с плейсхолдером, а с помощью псевдокласса :not отрицать это условие. В итоге, конструкция .text-input:not(:placeholder-shown) ~ .form-popup__label будет работать только, если placeholder скрыт.

Когда подсказка скрыта, мы лейблу задаем transform и поднимаем немного выше, а так же меняем размер шрифта. Если предусмотрена валидация формы, то меняем и цвет с помощью добавления дополнительного класса valid или error, который применит стили в случае успешной валидации формы или ошибки.

Стилизуем label при фокусе на поле ввода

.text-input:focus ~ .form-popup__label,
.text-input:not(:placeholder-shown) ~ .form-popup__label {
  font-size: 12px;
  transform: translateY(-0.4em);
}
 
.text-input.valid:focus ~ .form-popup__label,
.text-input.valid:not(:placeholder-shown) ~ .form-popup__label {
  color: #00c2ff;
}
.text-input.error:focus ~ .form-popup__label,
.text-input.error:not(:placeholder-shown) ~ .form-popup__label {
  color: #ff006b;
}

Мы рассмотрели возможности стилизации :placeholder с помощью CSS и добавили интересный эффект всплывающей подсказки с помощью label и :placeholder-shown.