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