path: root/files/ru/web/css/_doublecolon_placeholder/index.html

---
title: '::placeholder'
slug: 'Web/CSS/::placeholder'
tags:
  - '::placeholder'
  - CSS
  - Псевдоэлемент
translation_of: 'Web/CSS/::placeholder'
---
<div>{{CSSRef}}</div>

<p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлемент</a> <strong><code>::placeholder</code></strong> представляет собой <a href="/ru/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">текст placeholder</a> в {{HTMLElement("input")}} или {{HTMLElement("textarea")}} элементах.</p>

<pre class="brush: css no-line-numbers notranslate">::placeholder {
  color: blue;
  font-size: 1.5em;
}</pre>

<p>В <code>::placeholder</code> можно использовать только те CSS свойства, которые разрешены в псевдоэлементе {{cssxref("::first-line")}}.</p>

<div class="note">
<p><strong>Note:</strong> В большинстве браузеров по умолчанию placeholder выглядит как полупрозрачный или светлосерый текст.</p>
</div>

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="syntaxbox notranslate">{{csssyntax}}</pre>

<h2 id="Примеры">Примеры</h2>

<h3 id="Красный_текст">Красный текст</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush:html line-numbers language-html notranslate">&lt;input placeholder="Введите что-нибудь!"&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}</pre>

<h4 id="Результат">Результат</h4>

<p>{{EmbedLiveSample("Красный_текст", 200, 60)}}</p>

<h3 id="Зелёный_текст">Зелёный текст</h3>

<h4 id="HTML_2">HTML</h4>

<pre class="brush:html line-numbers language-html notranslate">&lt;input placeholder="Введите что-нибудь..."&gt;</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css notranslate">input::placeholder {
  color: green;
}
</pre>

<h4 id="Результат_2">Результат</h4>

<p>{{EmbedLiveSample("Зелёный_текст", 200, 60)}}</p>

<h2 id="Проблемы_доступности">Проблемы доступности</h2>

<h3 id="Цветовой_контраст">Цветовой контраст</h3>

<h4 id="Контрастность">Контрастность</h4>

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

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

<p>Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.</p>

<ul>
 <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM: Color Contrast Checker</a></li>
 <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h4 id="Использование">Использование</h4>

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

<p>Другой подход к представлению информации placeholder заключается в том, чтобы расположить её вне формы ввода в непосредственной близости от неё, а затем использовать <code><a href="/ru/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> для программного связывания {{HTMLElement("input")}} элемента с подсказкой.</p>

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

<pre class="brush:html line-numbers language-html notranslate">&lt;label for="user-email"&gt;Ваш email адрес&lt;/label&gt;
&lt;span id="user-email-hint" class="input-hint"&gt;Пример: jane@sample.com&lt;/span&gt;
&lt;input id="user-email" aria-describedby="user-email-hint" name="email" type="email"&gt;
</pre>

<ul>
 <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li>
</ul>

<h3 id="Режим_высокой_контрастности_Windows">Режим высокой контрастности Windows</h3>

<p>Текст placeholder будет отображаться с теми же стилями, что и введённый пользователем текст при работе в <a href="/ru/docs/Web/CSS/-ms-high-contrast">режиме высокой контрастности Windows</a>. Это вызовет затруднения с определением того какой текст был введён, а какой является placeholder.</p>

<ul>
 <li><a href="http://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast">Greg Whitworth — How to use -ms-high-contrast</a></li>
</ul>

<h3 id="Метки">Метки</h3>

<p>Placeholder не является заменой элемента {{htmlelement("label")}}. Без метки, которая программно связывается с формой с помощью {{htmlattrxref("for", "label")}} и {{htmlattrxref("id")}} аттрибутов, такие программы, как скринридеры не смогут анализировать элементы {{htmlelement("input")}}.</p>

<ul>
 <li><a href="/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints">MDN Basic form hints</a></li>
 <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li>
</ul>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}</td>
   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
   <td>Первоначальное описание.</td>
  </tr>
 </tbody>
</table>

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>

<div>


<p>{{Compat("css.selectors.placeholder")}}</p>
</div>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>Псевдокласс {{cssxref(":placeholder-shown")}}, который позволяет применять стили к элементу с <em><strong>активным </strong></em>placeholder.</li>
 <li>Связанные HTML элементы: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li>
 <li><a href="/ru/docs/Learn/HTML/Forms">HTML-формы</a></li>
</ul>