CSS - ::-moz-placeholder

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:

Description  

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.

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  

Specifications  

Not part of any specification.

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/::-moz-placeholder