Исчезающий placeholder при фокусе

Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. Если мы посмотрим html-справочник, то найдем там следующее описание — выводит текст внутри поля формы, который исчезает при получении фокуса или при наборе текста. Обычно отображается серым цветом.

К сожалению скрывание placeholder-а происходит по-разному — где то при получении фокуса, а где то при наличии хотя бы одного введенного символа. Мне нравится именно первый вариант, но как сделать его для всех браузеров, которые его поддерживают? Для этого определим следующие правила:

Скрываем placeholder красиво

Как реализовать скрытие placeholder в одном стиле для всех браузеров разобрались, теперь посмотрим, как можно это анимировать.

Плавное изменение прозрачности:

Сдвиг вправо

Сдвиг вниз

Поддержка устаревшими браузерами

Сейчас placeholder работает только в современных браузерах, но существует JS плагин, который позволяет не изобретая велосипедов делать этот атрибут кроссбраузерным — placeholder.js

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *