::placeholder

CSS псевдоэлемент ::placeholder представляет собой текст placeholder в <input> или <textarea> элементах.

::placeholder {
  color: blue;
  font-size: 1.5em;
}

В ::placeholder можно использовать только те CSS свойства, которые разрешены в псевдоэлементе ::first-line.

Note: В большинстве браузеров по-умолчанию placeholder выглядит как полупрозрачный или светлосерый текст.

Синтаксис

::placeholder

Примеры

Красный текст

HTML

<input placeholder="Введите что-нибудь!">

CSS

input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}

Результат

Зелёный текст

HTML

<input placeholder="Введите что-нибудь...">

CSS

input::placeholder {
  color: green;
}

Результат

Проблемы доступности

Цветовой контраст

Контрастность

Текст placeholder обычно имеет более светлую расцветку и содержит информацию о том, какие введённые данные будут допустимы, но при этом не является текущими введёнными данными.

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

Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.

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

Текст placeholder с высоким цветовым контрастом может быть воспринят как введённые данные. Текст placeholder исчезает, когда пользователь вводит что-либо в <input> элемент. Эти обстоятельства могут помешать заполнить правильно форму, особенно людям с когнитивными проблемами.

Другой подход к представлению информации placeholder заключается в том, чтобы расположить её вне формы ввода в непосредственной близости от неё, а затем использовать aria-describedby для программного связывания <input> элемента с подсказкой.

В таком случае содержимое подсказки будет доступно даже в том случае, если что-то введено в форму. Большинство скринридеров используют aria-describedby для чтения подсказок после того, как будет прочитан текст метки формы. Пользователь может отключить эту функцию, если дополнительная информация окажется ему ненужной.

<label for="user-email">Ваш email адрес</label>
<span id="user-email-hint" class="input-hint">Пример: jane@sample.com</span>
<input id="user-email" aria-describedby="user-email-hint" name="email" type="email">

Режим высокой контрастности Windows

Текст placeholder будет отображаться с теми же стилями, что и введённый пользователем текст при работе в режиме высокой контрастности Windows. Это вызовет затруднения с определением того какой текст был введён, а какой является placeholder.

Метки

Placeholder не является заменой элемента <label>. Без метки, которая программно связывается с формой с помощью for и id аттрибутов, такие программы, как скринридеры не смогут анализировать элементы <input>.

Спецификации

Спецификация Статус Комментарий
CSS Pseudo-Elements Level 4
Определение '::placeholder' в этой спецификации.
Рабочий черновик Первоначальное описание.

Совместимость с браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
::placeholder
Экспериментальная
Chrome Полная поддержка 57
Полная поддержка 57
Полная поддержка 6
С префиксом
С префиксом Требует вендорный префикс: -webkit-input-
Edge Полная поддержка 12
С префиксом
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -webkit-input-
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -ms-input-
Firefox Полная поддержка 51
Полная поддержка 51
Полная поддержка 19
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Нет поддержки НетOpera Полная поддержка 44
Полная поддержка 44
Полная поддержка 15
С префиксом
С префиксом Требует вендорный префикс: -webkit-input-
Safari Полная поддержка 10.1
Полная поддержка 10.1
Полная поддержка 5
С префиксом
С префиксом Требует вендорный префикс: -webkit-input-
WebView Android Полная поддержка 57
Полная поддержка 57
Полная поддержка 2
С префиксом
С префиксом Требует вендорный префикс: -webkit-input-
Chrome Android Полная поддержка 57
Полная поддержка 57
Полная поддержка 18
С префиксом
С префиксом Требует вендорный префикс: -webkit-input-
Firefox Android Полная поддержка 51
Полная поддержка 51
Полная поддержка 19
С префиксом
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка 43
Полная поддержка 43
Полная поддержка 14
С префиксом
С префиксом Требует вендорный префикс: -webkit-input-
Safari iOS Полная поддержка 10.3
Полная поддержка 10.3
Полная поддержка 4.3
С префиксом
С префиксом Требует вендорный префикс: -webkit-input-
Samsung Internet Android Полная поддержка 7.0
Полная поддержка 7.0
Полная поддержка 1.0
С префиксом
С префиксом Требует вендорный префикс: -webkit-input-

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

Смотрите также