The ::placeholder
CSS pseudo-element represents the placeholder text in an <input>
or <textarea>
element.
::placeholder {
color: blue;
font-size: 1.5em;
}
Only the subset of CSS properties that apply to the ::first-line
pseudo-element can be used in a rule using ::placeholder
in its selector.
Note: In most browsers, the appearance of placeholder text is a translucent or light gray color by default.
Syntax
::placeholder
Accessibility concerns
Color contrast
Contrast Ratio
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.
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.
Color contrast ratio is determined by comparing the luminosity of the placeholder text and the input background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), 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.
- WebAIM: Color Contrast Checker
- MDN Understanding WCAG, Guideline 1.4 explanations
- Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Usability
Placeholder text with sufficient color contrast may be interpreted as entered input. Placeholder text will also disappear when a person enters content into an <input>
element. Both of these circumstances can interfere with successful form completion, especially for people with cognitive concerns.
An alternate approach to providing placeholder information is to include it outside of the input in close visual proximity, then use aria-describedby
to programmatically associate the <input>
with its hint.
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 aria-describedby
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.
<label for="user-email">Your email address</label> <span id="user-email-hint" class="input-hint">Example: [email protected]</span> <input id="user-email" aria-describedby="user-email-hint" name="email" type="email">
Windows High Contrast Mode
Placeholder text will appear with the same styling as user-entered text content when rendered in Windows High Contrast Mode. This will make it difficult for some people to determine which content has been entered, and which content is placeholder text.
Labels
Placeholders are not a replacement for the <label>
element. Without a label that has been programmatically associated with an input using a combination of the for
and id
attributes, assistive technology such as screen readers cannot parse <input>
elements.
Examples
Red text
HTML
<input placeholder="Type something here!">
CSS
input::placeholder {
color: red;
font-size: 1.2em;
font-style: italic;
}
Result
Green text
HTML
<input placeholder="Type something here...">
CSS
input::placeholder {
color: green;
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Pseudo-Elements Level 4The definition of '::placeholder' in that specification. | Working Draft | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
::placeholder
|
Chrome Full support 57 Full support 57 Full support 6 Prefixed' Implemented with the vendor prefix: -webkit-input- |
Edge Full support 12 Full support 12 Prefixed' Implemented with the vendor prefix: -webkit-input- Full support 12 Prefixed' Implemented with the vendor prefix: -ms-input- |
Firefox Full support 51 Full support 51 Full support 19 Prefixed' Implemented with the vendor prefix: -moz- |
IE
No support No |
Opera Full support 44 Full support 44 Full support 15 Prefixed' Implemented with the vendor prefix: -webkit-input- |
Safari Full support 10.1 Full support 10.1 Full support 5 Prefixed' Implemented with the vendor prefix: -webkit-input- |
WebView Android Full support 57 Full support 57 Full support 2 Prefixed' Implemented with the vendor prefix: -webkit-input- |
Chrome Android Full support 57 Full support 57 Full support 18 Prefixed' Implemented with the vendor prefix: -webkit-input- |
Firefox Android Full support 51 Full support 51 Full support 19 Prefixed' Implemented with the vendor prefix: -moz- |
Opera Android Full support 43 Full support 43 Full support 14 Prefixed' Implemented with the vendor prefix: -webkit-input- |
Safari iOS Full support 10.3 Full support 10.3 Full support 4.3 Prefixed' Implemented with the vendor prefix: -webkit-input- |
Samsung Internet Android Full support 7.0 Full support 7.0 Full support 1.0 Prefixed' Implemented with the vendor prefix: -webkit-input- |
Legend
- Full support
- Full support
- No support
- No support
- Requires a vendor prefix or different name for use.'
- Requires a vendor prefix or different name for use.
See also
- The
:placeholder-shown
pseudo-class styles an element that has an active placeholder. - Related HTML elements:
<input>
,<textarea>
- HTML forms
::placeholder by Mozilla Contributors is licensed under CC-BY-SA 2.5.