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 it disappears when the field is focused or a value is entered.

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 is generally extremely good, you do need to bear in mind that the CSS ::placeholder pseudo‑element is not supported in Internet Explorer. So, if you are using placeholder styling in a mission‑critical way, and IE is still on your browser support matrix, then you may need to look into using a polyfill or an alternative approach (such as showing and hiding an overlaid span to replicate the same behaviour).

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

In conclusion, you can use CSS to customise the appearance of placeholder text in input fields. By using the ::placeholder pseudo‑element and defining the desired styles, you can change the colour (and many other style attributes) of the placeholder text to match the design of your application.