This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The ::placeholder CSS pseudo-element represents the placeholder text of a form 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 Firefox, the appearance of placeholder text is a translucent gray color by default.

Syntax

::placeholder

Example

HTML

<input placeholder="Type something here!">

CSS

input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}

Result

Specifications

Specification Status Comment
CSS Pseudo-Elements Level 4
The definition of '::placeholder' in that specification.
Working Draft Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Basic support 57 51.0 (51.0)[1] No support No support 44 10.1
Partial support with prefix Supported Supported Supported 10 -ms- Supported 5 -webkit-
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 57 57 52.0 (52.0) No support   10.3
Partial support with prefix 2.1 -webkit- Supported Supported 10 -ms- 37 -webkit- 4.3 -webkit-

[1] Before Gecko 51.0 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48) Gecko implemented this as the prefixed ::-moz-placeholder pseudo-element.

See also

Document Tags and Contributors

 Last updated by: mfluehr,