Стилизация placeholder

Placeholder’ом можно легко заменить целую строчку текста над input’ом, что отлично экономит место и делает форму более привлекательной. Рассмотрим варианты стилизации и исчезания надписи при фокусе.

  1. Изменение цвета placeholder. В этом случае просто задается стиль color (с поддержкой различных браузеров)
  2. Убрать placeholder при фокусе. Многим удобнее, когда помогающая надпись исчезает при фокусе. Для этого стоит присвоить стиль color: transparent
  3. Плавное исчезание placeholder. С помощью transition можно придать плавность трансформации/изменения цвета и т.д.
  4. Плавный сдвиг в сторону. Сдвиг текста удачно реализуется с помощью отступа первой строки блока текста. За это отвечает свойство text-indent

 

See the Pen Стилизация placeholder by webgrind (@webgrind) on CodePen.

Возможно, вам будет интересно:
x