::placeholder

Псевдоелемент CSS ::placeholder (заповнювач) представляє текст-заповнювач в елементі <input> або <textarea>.

Спробуйте його в дії

Лише та підмножина властивостей CSS, яка застосовується до псевдоелемента ::first-line, може бути використана в правилах, які використовують ::placeholder у селекторі.

[!NOTE] У більшості браузерів вигляд тексту-заповнювача – усталено прозорий або світло-сірого кольору.

Синтаксис

::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">Ваша адреса електронної пошти</label>
<span id="user-email-hint" class="input-hint">Приклад: [email protected]</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="Друкуйте тут" />

CSS

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

Результат

Непрозорий текст

Частина браузерів (наприклад, Firefox) задає усталене значення opacity для заповнювачів меншим за 100%. Якщо ви хочете, щоб текст-заповнювач був повністю непрозорим, задайте значення opacity рівним 1.

HTML

<input placeholder="Усталена непрозорість" />
<input placeholder="Повна непрозорість" class="force-opaque" />

CSS

::placeholder {
  color: green;
}

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

Результат

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

Сумісність із браузерами

Дивіться також

• Псевдоклас :placeholder-shown оформлює елемент, який має активний заповнювач.
• Споріднені елементи HTML: <input>, <textarea>
• Форми HTML