Что такое placeholder (плейсхолдер)? Это английское слово переводится как заполнитель. Используется в качестве пояснения или примера в полях ввода текста (имя, фамилия, e-mail и т. п.), в виде атрибута.
На данный момент поддерживается всеми современными браузерами. Ранее работа эмулировалась с помощью JavaScript. Элемент доказал свою пользу и разработчики браузеров ввели дополнительные свойства, позволяющие стилизовать «заполнитель» под свой дизайн.
Сначала следует текст про атрибут и примеры его использования. Если это не интересно, можете сразу перейти к теме статьи.
До сих пор нет единого мнения, является ли селектор выбора плейсхолдера псевдоклассом или псевдоэлементом. Браузеры на основе WebKit/blink и Gecko (Firefox 19+) считают псевдоклассом (:
, обозреватели Internet Explorer (движок Trident) и Firefox 18- относят к псевдоэлементам (. Opera 12 вообще не позволяет изменять оформление, хотя атрибут поддерживается. И пока в CSS не будет официально закреплён этот пресдо-тип, склока между разработчиками продолжится.
К счастью, устаревшие браузеры довольно оперативно заменяются новыми версиями — Chrome и Firefox с ускоренным циклом разработки «дисциплинировали» пользователей.
Если решите поддерживать старые версии обозревателей (Opera 12, IE8 для Windows XP, IE9 — Windows Vista), придётся действовать с помощью JavaScript.
Про placeholder сказал уже кучу раз, давайте посмотрим, как его можно использовать.
Как обычно выглядит форма:
В коде:
<form><p>Ваше имя:<br><input value=""></p></form>Пример с плейсхолдером:
Код:
<form><p><input value="" placeholder="Ваше имя"></p></form>Таким нехитрым способом удаётся сократить итоговые размеры форм. Увы, но в примере выше есть один недостаток: внешний вид плейсхолдера отдаётся на откуп браузеру. Если учесть, что многие обозреватели устанавливают цвет заполнителя серым, это лишает возможности использовать серые поля ввода.
Изменяем вид placeholder посредством css
::-webkit-input-placeholder { /* вид для Chrome/Safari/... */ }
::-moz-placeholder { /* вид для Firefox */ }
:-ms-input-placeholder { /* вид для IE */ }
Теперь, сделаем цвет плейсхолдера оранжевым и более блеклым (полупрозрачным):
Код:
::-webkit-input-placeholder { color:#f80; opacity:.5; }
::-moz-placeholder { color:#f80; opacity:.5; }
:-ms-input-placeholder { color:#f80; opacity:.5; }
Результат:
Вот и всё. Пользуйтесь
днём интернета
шоколадкой для работы мозга
коробочкой ароматного чая для бодрости
продлением хостинга на +1 месяц
Автор публикации
(2 голосов, в среднем: 5,00 из 5)
Загрузка...
