::placeholder
=============

CSS псевдоэлемент **`::placeholder`** представляет собой текст placeholder (en-US) в `<input>` или `<textarea>` (en-US) элементах.


```css
::placeholder {
  color: blue;
  font-size: 1.5em;
}
```


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

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

Синтаксис
---------

Error: could not find syntax for this itemПримеры
-------

### Красный текст

#### HTML


```html
<input placeholder="Введите что-нибудь!" />
```


#### CSS


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


#### Результат

### Зелёный текст

#### HTML


```html
<input placeholder="Введите что-нибудь..." />
```


#### CSS


```css
input::placeholder {
  color: green;
}
```


#### Результат

Проблемы доступности
--------------------

### Цветовой контраст

#### Контрастность

Текст placeholder обычно имеет более светлую расцветку и содержит информацию о том, какие введённые данные будут допустимы, но при этом не является текущими введёнными данными.

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

Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.

* WebAIM: Color Contrast Checker
* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

#### Использование

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

Другой подход к представлению информации placeholder заключается в том, чтобы расположить её вне формы ввода в непосредственной близости от неё, а затем использовать `aria-describedby` (en-US) для программного связывания `<input>` элемента с подсказкой.

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


```html
<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" />
```


* Placeholders in Form Fields Are Harmful — Nielsen Norman Group
### Режим высокой контрастности Windows

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

* Greg Whitworth — How to use -ms-high-contrast
### Метки

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

* MDN Basic form hints (en-US)
* Placeholders in Form Fields Are Harmful — Nielsen Norman Group
Спецификации
------------

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # placeholder-pseudo |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Псевдокласс `:placeholder-shown`, который позволяет применять стили к элементу с **активным** placeholder.
* Связанные HTML-элементы: `<input>`, `<textarea>` (en-US)
* HTML-формы