How TO - Change Placeholder Color

❮ Previous Next ❯

Learn how to change the color of the placeholder attribute with CSS.

Placeholder Color

Try it Yourself »

Step 1) Add HTML:

Use an input element and add the placeholder attribute:

Example

Step 2) Add CSS:

In most browsers, the placeholder text is grey. To change this, style the placeholder with the ::placeholder selector. Note that Firefox adds a lower opacity to the placeholder, so we use opacity: 1 to fix this.

Example

::placeholder {
color: red;
opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12 -18 */
color: red;
}

Try it Yourself »

Tip: Read more about the ::placeholder selector in our CSS Reference: CSS ::placeholder selector.

❮ Previous Next ❯