CSS Reference Pseudo-class

::placeholder

::placeholder is a CSS pseudo-element that represents placeholder text in an input field—text that represents the input and provides a hint to the user on how to fill out the form.

For example, a date-input field might have the placeholder text “YYYY/MM/DD” to clarify that numeric dates are to be entered in year-month-day order. An input field that takes an email as a value may have “john@doe.com” as placeholder text, hinting about the email format.

In most browsers, placeholder text is initially light grey colored. You can change the font style and color, for example, using the ::placeholder pseudo-element.

Trivia & Notes

All properties that apply to the ::first-line pseudo-element also apply to the ::placeholder pseudo-element.

Some browsers have their own non-standard implementations of the ::placeholder pseudo-element. All of those implementations require browser prefixes. Examples of these implementations is ::-webkit-input-placeholder, :-ms-input-placeholder (single colon), and :-moz-placeholder which has been deprecated in Firefox 19 in favor of the newer ::-moz-placeholder pseudo-element.

Depending on the browser, the input placeholder may or may not stay visible when the input field takes focus. For example, IE10+ will hide the placeholder when the input is focused, even if it is still empty.

Examples

The following snippet changes the default color and font family of the placeholder text on the page:

::placeholder {
    color: #96eb7f;
    font-family: Lato, sans-serif;
}
                

Live Demo

Have a look at the live demo:

View this demo on the Codrops Playground

Browser Support

input placeholder attribute

Method of setting placeholder text for text-like input fields, to suggest the expected inserted information.

Supported from the following versions:

Desktop

  • 4
  • 4
  • 10
  • 11
  • 5

Mobile / Tablet

  • 3.2
  • 2.1
  • all
  • 59
  • 55

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated December 11, 2016 at 7:39 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.