::placeholder

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

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

You can style that text across most browsers with this smattering of vendor-prefixed selectors:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

Important warning: this syntax is non-standard, thus all the naming craziness. It doesn’t appear in the spec at all. :placeholder-shown is standard, and even spec authors seem to think ::placeholder will be the standardized version.

Like any psuedo, you can scope it to specific elements as needed, like:

input[type="email"].big-dog::-webkit-input-placeholder {
  color: orange;
}

Demo

The difference between :placeholder-shown and ::placeholder

:placeholder-shown is for selecting the input itself when it’s placeholder text is being shown. As opposed to ::placeholder which styles the placeholder text.

Here’s a diagram:

I found this highly confusing as:

1. the specs only have :placeholder-shown and not ::placeholder
2. :placeholder-shown can still affect the styling of the placeholder text, since it’s a parent element (e.g. font-size).

Note that :placeholder-shown is a pseudo class (it’s an element in a particular state) and ::placeholder is a pseudo element (a visible thing that isn’t really in the DOM). Distinguishable by single-versus-double colons.

Tab Atkins cleared it up for me via email:

:placeholder-shown, being a pseudo-class, has to select an existing element – it selects the input whenever you’re in the placeholder-showing state. The ::placeholder pseudo-element wraps the actual placeholder text.

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

Firefox placeholder color

You might notice how in Firefox the color of the placeholder looks faded when compared to other browsers. In the image below, Firefox 43 is shown on the left whilst Chrome 47 is shown on the right:

This is because, by default, all placeholders in Firefox have an opacity value applied to them, so in order to fix this we need to reset that value:

::-moz-placeholder {
  opacity: 1;
}

You can see more by testing this demo out in Firefox.

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

Other resources

• MDN Docs
• “The CSS3 Placeholder Pseudo-element” by Guil Hernandez
• “Styling HTML placeholder attribute” by Mounir Lamouri
• “Styling Placeholders” by Tab Atkins

Related properties