::placeholder
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
CSS псевдоэлемент ::placeholder
представляет собой текст placeholder в <input>
или <textarea>
элементах.
::placeholder {
color: blue;
font-size: 1.5em;
}
В ::placeholder
можно использовать только те CSS-свойства, которые разрешены в псевдоэлементе ::first-line
.
Примечание: В большинстве браузеров по умолчанию 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 и больше с обычным начертанием.
- 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 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.
Метки
Спецификации
Specification |
---|
CSS Pseudo-Elements Module Level 4 # placeholder-pseudo |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Псевдокласс
:placeholder-shown
, который позволяет применять стили к элементу с активным placeholder. - Связанные HTML-элементы:
<input>
,<textarea>
- HTML-формы