Changing the Colour of Placeholder Text

The placeholder attribute in HTML allows you to specify placeholder text for an input field. This text is displayed inside the input field when it is empty, and disappears when a value is entered. Whether it remains visible when the empty field is focused depends on the browser.

By default, the placeholder text is styled using the user agent's default styles, which may vary depending on the browser, operating system, and user preferences. However, you can use CSS to customise the appearance of the placeholder text very easily using the ::placeholder pseudo‑element.

For example, this will change the colour of the placeholder text in any input field on the page to blue:

input::placeholder {
  color: blue;
}

You can ‑ of course ‑ combine this with more specific selectors (like classes or IDs) if you wish to target particular elements. For example:

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

#my-input::placeholder {
  color: red;
}

Or using Sass, it could look something not too dissimilar to:

.my-input {
  // general input styles
  color: red;
  
  &::placeholder {
    // styles specifically applied when in 'placeholder' state
    color: blue;
  }
}

You can also combine this with using CSS variables to define the colour of the placeholder text, which can make it easier to maintain and update the styles of your application:

:root {
  --placeholder-color: blue;
}

input::placeholder {
  color: var(--placeholder-color);
}

Whilst support for ::placeholder is generally good, Internet Explorer uses a different selector. If IE 10 or 11 is still on your browser support matrix, add a separate rule using :-ms-input-placeholder with the same colour declaration. Keep it separate from the standard selector so a browser that does not recognise one selector can still apply the other rule. You do not need a scripted overlay just to change the colour.

Accessibility Comes First

Placeholder text should not replace a visible label. It disappears as soon as someone starts typing, which makes it a poor place for instructions that the user may need to check again. This is especially awkward for people with memory, attention or screen‑magnification needs.

If the placeholder is only an example, styling it is fine. If it carries required instructions, move those instructions into a label, hint or validation message that remains available.

States and Contrast

The styled placeholder still needs enough contrast to be readable, but it should not look like a completed value. Test the default, focus, disabled, and error states together. A colour that looks harmless in the default state can become confusing once validation styling is added.

The Wrap‑up

Use ::placeholder for the placeholder itself and set opacity explicitly when a browser default weakens the chosen colour. Keep the text distinguishable from entered values and check its contrast in the real form. A placeholder is a hint, not a replacement for a visible label.