::placeholder

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

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

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

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

Синтаксис

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

Занепокоєння щодо доступності

Колірний контраст

Співвідношення контрасту

Текст-заповнювач зазвичай має світліший колір, щоб показати, що це лише пропозиція для того, якого роду введення буде дійсним, а не яке-небудь фактичне введення.

Важливо пересвідчитись, що співвідношення контрасту між кольором тексту-заповнювача та тлом поля – достатньо високе, щоб люди зі зниженим зором могли його прочитати, а також переконатись, що є достатньою різниця між кольором тексту-заповнювача та кольором введеного тексту, щоб користувачі не плутали текст-заповнювач із введеними даними.

Співвідношення колірного контрасту визначається шляхом порівняння світності кольорів тексту-заповнювача і тла поля. Щоб відповідати поточним Настановам щодо доступності вебвмісту (WCAG), необхідне співвідношення 4,5:1 для текстового вмісту і 3:1 для більшого тексту, наприклад, заголовків. Великим текстом вважається текст грубим шрифтом розміром 18.66px і більше, або 24px і більше.

Зручність

Текст-заповнювач із достатнім колірним контрастом може бути сприйнятий як введені дані. Текст-заповнювач також зникне, коли користувач введе вміст в елемент <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" />

Режим високого контрасту Windows

Текст-заповнювач з'явиться з таким же оформленням, як введений користувачем текстовий вміст, коли візуалізується в Режимі високого контрасту Windows). Для декого це ускладнить з'ясування того, який вміст був введений, а який – є текстом-заповнювачем.

Підписи

Заповнювачі – це не заміна для елемента <label>. Без підпису, який був програмно пов'язаний із полем введення за допомогою комбінації атрибутів for і id, допоміжні технології, як то читачі з екрана, не можуть розібрати елементи <input>.

Приклади

Зміна вигляду заповнювача

Цей приклад демонструє частину змін, які можна внести до стилів тексту-заповнювача.

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;
}

Результат

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

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

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
::placeholder
Chrome Full support 57
Edge Full support 79
Firefox Full support 51
Internet Explorer No support No
Opera Full support 44
Safari Full support 10.1
WebView Android Full support 57
Chrome Android Full support 57
Firefox for Android Full support 51
Opera Android Full support 43
Safari on iOS Full support 10.3
Samsung Internet Full support 7.0

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