Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Note: The ::-moz-placeholder pseudo-element was introduced as a replacement for the :-moz-placeholder pseudo-class that has been deprecated in Firefox 19. Since Firefox 51 this feature is implemented as the standard ::placeholder pseudo-element.

Summary

The ::-moz-placeholder pseudo-element represents any form element displaying placeholder text. This allows web developers and theme designers to customize the appearance of placeholder text, which is a light grey color by default. This may not work well if you've changed the background color of your form fields to be a similar color, for example, so you can use this pseudo-element to change the placeholder text color.

Example

This example styles the placeholder text by making it green.

HTML content

<input id="test" placeholder="Placeholder text!">

CSS content

input::-moz-placeholder {
  color: green;
}

The result looks like this:

Specifications

Not part of any specification.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support ? 19.0 (19.0)[1] ? ? ?
Feature Android Firefox Mobile (Gecko) Firefox OS IE Phone Opera Mobile Safari Mobile
Basic support ? 19.0 (19.0)[1] ? ? ? ?

[1] Firefox applies a default style of opacity: 0.54 to placeholder text. See bug 556145. Most other major browsers don't currently share this particular default style for their placeholder text pseudo-elements or pseudo-classes.

Gecko previously had this implemented as a pseudo-class :-moz-placeholder. See bug 737786.

See also

Document Tags and Contributors

 Last updated by: Sebastianz,