Cross-browser Styling for Placeholders


October 17, 2019 2 min read

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


Think others might enjoy this post? Share it!


I'd love to hear from you, let me know your thoughts!