CSS-псевдоэлемент `::placeholder`

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

Попробуйте

input {
  margin-top: 0.5rem;
}

input::placeholder {
  font-weight: bold;
  opacity: 0.5;
  color: red;
}

<label for="first-name">Your phone number:</label><br />

<input
  id="first-name"
  type="tel"
  name="phone"
  minlength="9"
  maxlength="9"
  placeholder="It must be 9 digits" />

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

Синтаксис

::placeholder {
  /* ... */
}

Доступность

Контрастность цветов

Коэффициент контрастности

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

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

Коэффициент контрастности цветов определяется сравнением яркости текста-заполнителя и фона поля ввода. Для соответствия актуальным Рекомендациям по обеспечению доступности веб-контента (WCAG) коэффициент должен составлять 4,5:1 для текстового содержимого и 3:1 для крупного текста, например заголовков. Крупным считается текст размером от 18,66 px с полужирным начертанием или от 24 px.

• WebAIM: средство проверки контрастности цветов
• Пояснения MDN к WCAG, рекомендация 1.4

• [Понимание критерия успеха 1.4.3

  Понимание WCAG 2.0 от W3C](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)

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

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

Вместо текста-заполнителя подсказку можно разместить вне поля ввода, рядом с ним, а затем программно связать её с элементом <input> с помощью атрибута aria-describedby.

При таком подходе подсказка остаётся доступной даже после ввода данных в поле, а после загрузки страницы поле ввода выглядит пустым. Большинство программ экранного доступа использует 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" />

• Текст-заполнители в полях форм вредны — Nielsen Norman Group

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

В режиме высокой контрастности Windows текст-заполнитель будет отображаться так же, как введённый пользователем текст. Из-за этого некоторым людям будет трудно определить, какие данные были введены, а какие являются текстом-заполнителем.

Подписи

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

• Текст-заполнители в полях форм вредны — Nielsen Norman Group

Примеры

Изменение внешнего вида текста-заполнителя

В этом примере показаны некоторые изменения, которые можно внести в стили текста-заполнителя.

HTML

<input placeholder="Type here" />

CSS

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

Результат

Непрозрачный текст

В некоторых браузерах текст-заполнитель отображается с пониженной непрозрачностью. Чтобы текст был полностью непрозрачным, задайте значение свойства color явно. Значение currentColor позволяет использовать тот же цвет, что и у соответствующего элемента ввода.

HTML

<input placeholder="Color set by browser" />
<input placeholder="Same color as input" class="explicit-color" />
<input placeholder="Semi-opaque text color" class="opacity-change" />

CSS

input {
  font-weight: bold;
  color: green;
}

.explicit-color::placeholder {
  /* use the same color as input element to avoid the browser set default color */
  color: currentColor;
}

.opacity-change::placeholder {
  /* less opaque text */
  color: color-mix(in srgb, currentColor 70%, transparent);
}

Результат

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

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

См. также

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