How to Change Placeholder Color for Textboxes

The placeholder attribute is used in input textboxes and textarea 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;
}

Example

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.