How to Change Placeholder Color for Textboxes

Use-Cases of this Tutorial

  • Know how to change CSS properties of placeholder text for <input> and <textarea> elements.
  • Know about the ::placeholder CSS selector.

Color of the placeholder text in input fields can be changed using the ::placeholder CSS selector.

The placeholder attribute is used in input textboxes to specify a "label" text for that input.

<input type="text" id="first-name" placeholder="First Name" />

By default most browsers give a light grey color by default to the placeholder text. However its text color (and a few other CSS properties) can be changed with the ::placeholder pseudo-element.

/* change placeholder text color for all text inputs in page */
::placeholder {
    color: red;
}
/* change placeholder text color only for a specific input */
#first-name::placeholder {
    color: #cccccc;
}

Demo

Changing Other CSS Properties for Placeholder

Apart from changing the color property, a few other CSS properties can be changed as well. The complete list of CSS properties that can be changed are :

  • All font related CSS properties — font, font-weight, font-family etc
  • All background related CSS properties — background, background-color, background-image etc
  • Word and letter spacing properties — word-spacing & letter-spacing
  • Few other text affecting properties — text-decoration, text-transform, line-height, text-shadow, color & opacity
  • text-align property can also be used to center / left / right align the placeholder text.
::placeholder {
    color: #003BDE;
    font-weight: 700;
    opacity: 1;
    font-style: italic;
    text-align: center;
}

Changing CSS for Input Boxes Currently Showing Placeholder

In some this case we would want to apply specific CSS for <input> and <textarea> elements which are currently showing placeholder text. We'd like that once user fills out the input field, those specific CSS properties won't be applied anymore.

This can be done using :placeholder-shown selector. Read Using :placeholder-shown to Customize CSS for Empty Text Input to know more.

Using :placeholder-shown to Customize CSS for Empty Text Input
Loading Comments