::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.