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.
::-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.The ::-moz-placeholder pseudo-element represents any form element displaying placeholder text.
input::-moz-placeholder {
color: green;
}
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
Gecko previously had this implemented as a pseudo-class :-moz-placeholder. See bug 737786.