Change Input Placeholder Color With CSS

Looking to change the color of your HTML form’s placeholder text?

This CSS will make your <input> and <textarea> placeholders blue:

::-ms-input-placeholder, :-ms-input-placeholder, ::placeholder {
    color: #00f;
}

::placeholder {
    opacity: 1;
}

It also works in SCSS and Less.

And, of course, you can set the color to something other than #08f.

Here’s an example HTML element to test out your placholder color:

<input type="text" placeholder="This is a customized placeholder!">

Sass placeholder colors

If you’re using Sass, I have a similar snippet for you:

::-ms-input-placeholder, :-ms-input-placeholder, ::placeholder
    color: #00f

::placeholder
    opacity: 1

Selectors and properties

When something is preceded by a colon in CSS, such as “::placeholder”, it is a selector.

Selectors are not properties, and cannot be treated as such.

Therefore, the following code will not work:

/* Do NOT do this! */
input, textarea {
    ::placeholder: #00f;
}

These special selectors still share the same properties as other typical selectors, just like how ::placeholder has a color property.

In other words, you can style your placeholders just as you would style a normal text element.

For example, here is a way to make your form placeholders uppercase, bold, and italic:

::-ms-input-placeholder, :-ms-input-placeholder, ::placeholder {
    font-style: italic;
    font-weight: 700;
    text-transform: uppercase;
}

Conclusion

I like being able to copy snippets and plug them right in to my code on the go, so I hope you’ve found one of these useful.

Until next time!