1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
---
title: '::placeholder'
slug: 'Web/CSS/::placeholder'
translation_of: 'Web/CSS/::placeholder'
---
<div>{{CSSRef}}</div>
<p>The <strong><code>::placeholder</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> represents the <a href="/en-US/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">placeholder text</a> in an {{HTMLElement("input")}} or {{HTMLElement("textarea")}} element.</p>
<pre class="brush: css no-line-numbers notranslate">::placeholder {
color: blue;
font-size: 1.5em;
}</pre>
<p>Only the subset of CSS properties that apply to the {{cssxref("::first-line")}} pseudo-element can be used in a rule using <code>::placeholder</code> in its selector.</p>
<div class="note">
<p><strong>Note:</strong> In most browsers, the appearance of placeholder text is a translucent or light gray color by default.</p>
</div>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="Accessibility_concerns">Accessibility concerns</h2>
<h3 id="Color_contrast">Color contrast</h3>
<h4 id="Contrast_Ratio">Contrast Ratio</h4>
<p>Placeholder text typically has a lighter color treatment to indicate that it is a suggestion for what kind of input will be valid, and is not actual input of any kind.</p>
<p>It is important to ensure that the contrast ratio between the color of the placeholder text and the background of the input is high enough that people experiencing low vision conditions will be able to read it while also making sure there is enough of a difference between the placeholder text and input text color that users do not mistake the placeholder for inputed data.</p>
<p>Color contrast ratio is determined by comparing the luminosity of the placeholder text and the input background color values. In order to meet current <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.</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="Usability">Usability</h4>
<p>Placeholder text with sufficient color contrast may be interpreted as entered input. Placeholder text will also disappear when a person enters content into an {{htmlelement("input")}} element. Both of these circumstances can interfere with successful form completion, especially for people with cognitive concerns.</p>
<p>An alternate approach to providing placeholder information is to include it outside of the input in close visual proximity, then use <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> to programmatically associate the {{HTMLElement("input")}} with its hint.</p>
<p>With this implementation, the hint content is available even if information is entered into the input field, and the input appears free of preexisting input when the page is loaded. Most screen reading technology will use <code>aria-describedby</code> to read the hint after the input's label text is announced, and the person using the screen reader can mute it if they find the extra information unnecessary.</p>
<pre class="brush:html line-numbers language-html notranslate"><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">
</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_High_Contrast_Mode">Windows High Contrast Mode</h3>
<p>Placeholder text will appear with the same styling as user-entered text content when rendered in <a href="/en-US/docs/Web/CSS/-ms-high-contrast">Windows High Contrast Mode</a>. This will make it difficult for some people to determine which content has been entered, and which content is placeholder text.</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="Labels">Labels</h3>
<p>Placeholders are not a replacement for the {{htmlelement("label")}} element. Without a label that has been programmatically associated with an input using a combination of the {{htmlattrxref("for", "label")}} and {{htmlattrxref("id")}} attributes, assistive technology such as screen readers cannot parse {{htmlelement("input")}} elements.</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="Examples">Examples</h2>
<h3 id="Red_text">Red text</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush:html line-numbers language-html notranslate"><input placeholder="Type something here!"></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="Result">Result</h4>
<p>{{EmbedLiveSample("Red_text", 200, 60)}}</p>
<h3 id="Green_text">Green text</h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush:html line-numbers language-html notranslate"><input placeholder="Type something here..."></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css notranslate">input::placeholder {
color: green;
}
</pre>
<h4 id="Result_2">Result</h4>
<p>{{EmbedLiveSample("Green_text", 200, 60)}}</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}</td>
<td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>
<p>{{Compat("css.selectors.placeholder")}}</p>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li>The {{cssxref(":placeholder-shown")}} pseudo-class styles an element that <em>has</em> an active placeholder.</li>
<li>Related HTML elements: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li>
<li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms</a></li>
</ul>
|
