::placeholder
The ::placeholder CSS pseudo-element selects help text in <input> and <textarea> elements when no value is set.
Overview
The ::placeholder CSS pseudo-element selects help text in <input> and <textarea> elements when no value is set.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 57 | 79 | 51 | 10.1 | 57 | 10.3 | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit-input- (6)
Notes 3 item(s)
Compatibility
- Available with a vendor prefix: -webkit-input- (12)
- Available with a vendor prefix: -ms-input- (12)
Removed
- This feature was removed in a later browser version (79)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -moz- (19)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit-input- (5)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit-input- (18)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit-input- (4.2)
Syntax
CSS
input::placeholder {
color: #999;
font-style: italic;
opacity: 1;
}Live demo
Use cases
Using ::placeholder
The ::placeholder CSS pseudo-element selects help text in <input> and <textarea> elements when no value is set.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features