Cross-browser Styling for Placeholders

Styling input placeholder text seems like something that should be pretty simple and straightforward, but there are a couple of gotchas to be aware of. To style placeholder text for different browsers, you'll need to use different pseudo classes.

Please note that if you are using a tool like autoprefixer, you won't have to worry about this.

The standard way to target the placeholder text is to use the ::placeholder pseudo class. This is supported by the latest versions of Firefox, Chrome, and Safari, including mobile. However, this is not supported by Edge, IE, Chrome versions 4-56, Safari versions 5-10, iOS Safari versions 4.2-10.2, or Firefox versions 19-50 (and any older Chrome/Firefox/Safari versions).

To support Edge, you'll need to use ::-ms-input-placeholder, or ::-webkit-input-placeholder, which is also used for older versions of Chrome and Safari. And to support Firefox versions 19-50, you'll need to use ::-moz-placeholder. This becomes :-moz-placeholder for supporting even older versions. For IE10/IE11 support, use :-ms-input-placeholder.

In IE, you may need to add an !important when trying to change the color of the placeholder text.

If you are separating selectors with a comma, please note that browsers will fail the whole block if they run into a selector that's considered invalid. It is, therefore, necessary to separate each of the styles.

For example, these styles:

.input::placeholder,
.input::-webkit-input-placeholder,
.input::-moz-placeholder {
  color: red;
}

Should be:

.input::placeholder {
  color: red;
}
.input::-webkit-input-placeholder {
  color: red;
}
.input::-webkit-input-placeholder {
  color: red;
}

Besides the technical ability to style placeholder text, be aware of the following guidelines for how to style placeholder text in the most user-friendly way:

1. Do not use placeholder text as a replacement for a label. This is bad for accessibility.
2. Placeholder text should not contain important information, as it disappears when a user starts typing.
3. It should be clear that the placeholder text is a placeholder, and is not pre-filled information.

Feel free to comment if any of this information is wrong or becomes outdated.