MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey-2018-1

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

57

Yes -webkit-

Yes -webkit-

51

Yes -moz-

10 -ms-

44

Yes -webkit-

10.1

5 -webkit-

FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support

57

2.1 -webkit-

57

Yes -webkit-

Yes -webkit-

52

Yes -moz-

37 -webkit-

10.3

4.3 -webkit-

?

See also

Document Tags and Contributors

 Last updated by: fscholz,