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

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

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

Синтаксис

Примеры

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

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 и больше с обычным начертанием.

• WebAIM: Color Contrast Checker
• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

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

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

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

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

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

• Placeholders in Form Fields Are Harmful — Nielsen Norman Group

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

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

• Greg Whitworth — How to use -ms-high-contrast

Метки

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

• MDN Basic form hints
• Placeholders in Form Fields Are Harmful — Nielsen Norman Group

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

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

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

• Псевдокласс:placeholder-shown, который позволяет применять стили к элементу сактивным placeholder.
• Связанные HTML-элементы:<input>,<textarea>
• HTML-формы