::placeholder

The ::placeholder pseudo element (or a pseudo class, in some cases) allows you to style the placeholder of a form element. As in, the text set with the placeholder attribute:

<input type="email" placeholder="[email protected]">

::-webkit-input-placeholder {
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder {
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

Important warning: this syntax is non-standard, and in flux. It will change in the near future, so don’t rely on it too heavily.

Element or Class?

This functionality is not standardized. That means that every browser has a different idea on how it should work.

Firefox originally implemented this as a pseudo class, but changed it for a bunch of reasons. To make a long story short, you can’t do as much with a pseudo class.

For instance, if you want to change the color of the test when the input is focused. You would use a selector like input:focus::placeholder, which you wouldn’t be able to do with a pseudo class (they don’t stack the same way).

IE10 supports this as a pseudo class, rather than an element. Everyone else has implemented a pseudo element.

Supported Styles

The pseudo element supports styling of these properties:

• font properties
• color
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• text-indent
• opacity

The pseudo class supports most (if not all) of these properties as well, but isn’t as flexible for the reasons outlined above.

Browser Support

Firefox supports a pseudo class up until version 18. Version 19+ support the pseudo element, rather than the class.