CSS псевдоэлемент ::placeholder представляет собой текст placeholder в {{HTMLElement("input")}} или {{HTMLElement("textarea")}} элементах.
::placeholder {
color: blue;
font-size: 1.5em;
}
В ::placeholder можно использовать только те CSS-свойства, которые разрешены в псевдоэлементе {{cssxref("::first-line")}}.
Note: В большинстве браузеров по умолчанию placeholder выглядит как полупрозрачный или светло-серый текст.
<input placeholder="Введите что-нибудь!">
input::placeholder {
color: red;
font-size: 1.2em;
font-style: italic;
}
{{EmbedLiveSample("Красный_текст", 200, 60)}}
<input placeholder="Введите что-нибудь...">
input::placeholder {
color: green;
}
{{EmbedLiveSample("Зелёный_текст", 200, 60)}}
Текст placeholder обычно имеет более светлую расцветку и содержит информацию о том, какие введённые данные будут допустимы, но при этом не является текущими введёнными данными.
Важно обеспечить достаточный цветовой контраст между placeholder и фоном, чтобы люди со слабым зрением могли его прочитать, но при этом должна быть достаточная разница между введённым текстом и текстом placeholder, чтобы пользователь не путал их.
Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.
Текст placeholder с высоким цветовым контрастом может быть воспринят как введённые данные. Текст placeholder исчезает, когда пользователь вводит что-либо в {{htmlelement("input")}} элемент. Эти обстоятельства могут помешать заполнить правильно форму, особенно людям с когнитивными проблемами.
Другой подход к представлению информации placeholder заключается в том, чтобы расположить её вне формы ввода в непосредственной близости от неё, а затем использовать aria-describedby для программного связывания {{HTMLElement("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">
Текст placeholder будет отображаться с теми же стилями, что и введённый пользователем текст при работе в режиме высокой контрастности Windows. Это вызовет затруднения с определением того какой текст был введён, а какой является placeholder.
Placeholder не является заменой элемента {{htmlelement("label")}}. Без метки, которая программно связывается с формой с помощью {{htmlattrxref("for", "label")}} и {{htmlattrxref("id")}} атрибутов, такие программы, как скринридеры не смогут анализировать элементы {{htmlelement("input")}}.
{{Compat}}