Верх страницы
Обложка к записи Стилизуем HTML5 placeholder на CSS
Время для прочтения: 0 мин. 19 сек.

Стилизуем HTML5 placeholder на CSS

В HTML5 появился замечательный атрибут тега <input> под названием placeholder (подсказывающий текст). Для стилизации которого так же можно применить CSS-стили через псевдо-селектор :placeholder как и для любого другого тега.

Чтобы не быть голословным, сразу пример

Для браузера Firefox используются другие правила в отличие от Safari и Google Chrome.


/* для всех */
::-webkit-input-placeholder  { color:#f00; }
:-moz-placeholder { color:#f00; }
:-ms-input-placeholder { color:#f00; }

/* только для webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder {
color:#090;
background:lightgreen;
text-transform:uppercase;
}
#field4::-webkit-input-placeholder {
font-style:italic;
text-decoration:overline;
letter-spacing:3px; color:#999;
}

/* только для mozilla */
#field2:-moz-placeholder { color:#00f; }
#field3:-moz-placeholder {
color:#090; background:lightgreen;
text-transform:uppercase;
}
#field4:-moz-placeholder {
font-style:italic;
text-decoration:overline;
letter-spacing:3px;
color:#999;
}

Пример

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

БраузерПоддержка с версии
Firefox4 (Gecko 2.0)
Google Chrome5
Internet Explorer10

Нельзя совмещать селекторы ::-webkit-input-placeholder и :-moz-placeholder в один — работать не будет! И обратите внимание на количество двоеточий для конкретного браузера!

Список поддерживаемых CSS стилей

Chrome 10(Win 7)Chrome 11 (Win 7)Firefox 4(Win 7)Safari 3.1(Win XP & OS X)Safari 5(Win 7 & OS X)Opera 11(Win 7)
background-colorнетнет+нет+нет
borderнетнет+нет+нет
color+++нет+нет
font-size+++нет+нет
font-style+++нет+нет
font-weight+++нет+нет
letter-spacing+++нет+нет
line-heightнетнетнетнетнетнет
padding top/bottomнетнет+нет+нет
padding left/rightнетнет+нетнетнет
text-decorationнетнет+нет+нет
text-transformнетнет+нет+нет

RTFM

Автор: Кобзарёв Михаил

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, OpenCart, DLE, Laravel, Moonshine, Symfony, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

6 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Deep
Deep
13 лет назад

Не пашет…
Вообще не показывает, будто нет плейсхолдера совсем…

Mozilla/5.0 (X11; U; Linux i686; en-GB; rv:1.9.1.3) Gecko/20091020 Ubuntu/9.10 (karmic) Firefox/3.5.3

disqusashto
disqusashto
10 лет назад

в отличиЕ

mihdan
10 лет назад
Ответить на  disqusashto

Спасибо, исправил )

Dmitry Dudin
Dmitry Dudin
9 лет назад

Вот примеры http://html5.by/blog/placeholder для стилизации placeholder

mihdan
9 лет назад
Ответить на  Dmitry Dudin

Спасибо за ссылку

Предыдущая запись
Следующая запись

Давайте дружить
в Telegram

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы