::placeholder

Можно использовать только подмножество свойств CSS, применимых к псевдоэлементу ::first-line, в правиле, использующем ::placeholder в качестве селектора.

Соотношение контрастности

Текст подсказки обычно имеет более светлый цвет, чтобы указать, что это лишь предложение о том, какой вид ввода будет допустимым, а не фактический ввод.

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

Соотношение контрастности цвета определяется путём сравнения яркости текста подсказки и значений цвета фона поля ввода. Для соответствия текущим Руководящим принципам по доступности веб-контента (WCAG) требуется соотношение 4.5:1 для текстового контента и 3:1 для крупного текста, такого как заголовки. Крупный текст определяется как текст размером 18.66px и больше или жирным шрифтом, или размером 24px и больше.

• WebAIM: Проверка контрастности цветов
• MDN Разъяснение WCAG, Раздел 1.4
• Понимание критерия успеха 1.4.3 | W3C Понимание WCAG 2.0

Удобство использования

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

Альтернативный подход к предоставлению информации о подсказках — размещение её вне поля ввода, в непосредственной близости, а затем использование aria-describedby для программирования связи <input> с подсказкой.

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

<label for="user-email">Your email address</label>
<span id="user-email-hint" class="input-hint">Example: jane@sample.com</span>
<input
  id="user-email"
  aria-describedby="user-email-hint"
  name="email"
  type="email" />

• Placeholders in Form Fields Are Harmful — Nielsen Norman Group

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

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

• Placeholders in Form Fields Are Harmful — Nielsen Norman Group

Этот пример демонстрирует некоторые изменения, которые можно внести в стили текста подсказки.

HTML

<input placeholder="Type here" />

CSS

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

Результат

В некоторых браузерах (таких как Firefox) значение по умолчанию opacity для подсказок устанавливается ниже 100%. Если вам нужен полностью непрозрачный текст подсказки, установите opacity в значение 1.

HTML

<input placeholder="Default opacity" />
<input placeholder="Full opacity" class="force-opaque" />

CSS

::placeholder {
  color: green;
}

.force-opaque::placeholder {
  opacity: 1;
}

Результат

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