Widely available Supported across all major browsers. Safe to use in production.

::placeholder

The ::placeholder CSS pseudo-element represents the placeholder text in an <input> or <textarea> element.

Selectors

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:placeholder
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

itarikstyle

CSS itarikstyle demo.

PreviewFullscreen

customcol-

CSS customcol- demo.

PreviewFullscreen

Textarea

CSS Textarea demo.

PreviewFullscreen

Use cases

  • Using ::placeholder

    The ::placeholder CSS pseudo-element represents the placeholder text in an <input> or <textarea> element.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links