How To Change Placeholder Color With CSS?

Ethan D. -

Problem: Customizing Placeholder Text Color

Placeholder text in form fields often appears in a default light gray color. This may not always match a website's design. Changing this color can improve visual consistency and accessibility. However, it requires specific CSS techniques.

CSS Techniques for Changing Placeholder Color

Using Pseudo-elements

The ::placeholder pseudo-element is the standard way to style placeholder text. It targets the placeholder text in form fields. Here's an example:

::placeholder {
  color: #999;
}

This method works in most modern browsers. Check browser compatibility when using this technique.

Tip: Placeholder Contrast

Make sure the placeholder color has enough contrast with the input background for better readability. Use tools like WebAIM's Contrast Checker to verify the contrast ratio.

Browser-specific Pseudo-classes and Pseudo-elements

For wider browser support, you may need to use vendor-specific selectors:

  • ::-webkit-input-placeholder for WebKit browsers (Chrome, Safari, newer versions of Opera):
::-webkit-input-placeholder {
  color: #999;
}
  • ::-moz-placeholder for Mozilla Firefox:
::-moz-placeholder {
  color: #999;
  opacity: 1;
}

Note: Firefox applies an opacity to placeholder text by default. Setting opacity: 1 shows the color as intended.

  • :-ms-input-placeholder for Internet Explorer and Edge:
:-ms-input-placeholder {
  color: #999;
}