Псевдоэлемент ::placeholder

Псевдоэлемент, с помощью которого задаётся стилевое оформление подсказывающего текста, созданного атрибутом placeholder. Допускается использовать свойства для изменения вида текста, например, задать шрифт и цвет.

Синтаксис

Селектор::placeholder { ... }

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>placeholder</title> <style> body { background: #053f38; } input[type="search"] { border: 1px solid #98baba; /* Параметры рамки */ background: transparent; /* Прозрачный фон */ padding: 1px 4px; /* Поля вокруг текста */ color: #fff; /* Цвет текста */ } input[type="search"]::-moz-placeholder { color: #ffd595; /* Цвет подсказывающего текста */ } input[type="search"]::-webkit-input-placeholder { color: #ffd595; } input[type="search"]:-ms-input-placeholder { color: #ffd595; } input[type="search"]::-ms-input-placeholder { color: #ffd595; } input[type="search"]::placeholder { color: #ffd595; } </style> </head> <body> <form action="handler.php"> <p><input type="search" placeholder="Поиск по сайту" name="q"> <input type="submit" value="Найти"></p> </form> </body> </html>

Результат примера показан на рис. 1.

Использование ::placeholder

Рис. 1. Использование ::placeholder

Примечание

Internet Explorer использует псевдокласс :-ms-input-placeholder.

Microsoft Edge использует псевдоэлемент ::-ms-input-placeholder.

Chrome, до версии 57, Opera до версии 44, Safari до версии 10.1 и Android используют псевдоэлемент ::-webkit-input-placeholder.

Firefox с версии 4 и до 19 использует псевдокласс :-moz-placeholder.

Firefox до версии 51 использует псевдоэлемент ::-moz-placeholder.

Браузеры

10124571544510.141951
2.119304.310.3

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Практика

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 30.08.2017
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты