Change placeholder text color with CSS

The CSS

input::placeholder,
textarea::placeholder {
  color: #767676;
  opacity: 1;
}

• ::placeholder selects the placeholder text in an <input> or <textarea>.
• MDN lists it as Baseline, available across browsers since January 2020, so you don't need vendor prefixes for current browsers.
• Only properties that apply to ::first-line work here: colour, font properties, opacity, letter spacing and similar.

Why the colour looks lighter than you set it

Browsers use different default colours for placeholder text, and MDN notes that some make it less opaque. If your colour looks washed out:

• Set color explicitly, as above.
• Add opacity: 1 to cancel any default transparency.
• To match the field's own text colour, use color: currentColor. For a lighter version of it, MDN's example uses color-mix(in srgb, currentColor 70%, transparent).

Check the contrast

Placeholder text is meant to look lighter than typed text, but it still has to be readable. MDN applies WCAG's minimums to it: 4.5:1 for normal text and 3:1 for large text. Large means 18.66px and bold, or 24px and up.

The colour tool below starts on #767676 and checks it against white. Change the base colour to your own grey and look at the contrast for each shade. Then choose the lightest shade that still passes 4.5:1 on your field's background.

Some common greys on white, worked out with the WCAG formula:

• #767676: 4.54:1, passes for normal text
• #6b7280: 4.83:1, passes
• #9ca3af: 2.54:1, fails for normal text
• #a9a9a9 (CSS darkgray): 2.35:1, fails

Placeholder colour in dark mode

A grey that passes on white can fail on a dark field, so set a second colour for dark mode:

@media (prefers-color-scheme: dark) {
  input::placeholder,
  textarea::placeholder {
    color: #9ca3af;
  }
}

Worked out the same way, on a dark grey field (#1f2937):

• #9ca3af: 5.78:1, passes
• #6b7280: 3.04:1, fails for normal text, though it passed on white

If your site has a theme switch rather than following the system setting, put the dark colour under your dark theme's class instead of the media query.

Keep placeholder and typed text apart

MDN warns that placeholder text with strong contrast may be mistaken for text someone typed. Keep a visible difference: a lighter grey, or italics, or both. The field also needs a real <label>, since the placeholder disappears as soon as someone types.

In Windows High Contrast Mode, placeholder text appears in the same style as typed text, so your colour won't apply there. That's one more reason not to put instructions only in the placeholder.

Style one field only

Add a class to target a single field:

.search-box::placeholder {
  color: #6b7280;
  font-style: italic;
}

To style the field itself while its placeholder is showing, use the :placeholder-shown pseudo-class, for example to change its border.