Стилизация 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.