How to Change Input Placeholder Color With CSS?

Find out how placeholder color can be changed using CSS

You can change the color of form input elements' placeholder in CSS by using the ::placeholder pseudo-element. For example:

::placeholder { color: blue; } /* applies to all placeholders */

input::placeholder { color: red; } /* applies to input elements only */
textarea::placeholder { color: black; } /* applies to textarea elements only */

.input::placeholder { color: orange; } /* applies to elements with .input class name */

As you can see from the examples above, you can apply the ::placeholder pseudo-element to any CSS selector.

Please have a look at the browser support for ::placeholder if you wish to support older browsers. For certain older browsers, you may have to add vendor prefixes.

Hope you found this post useful. It was published . Please show your love and support by sharing this post.