How to Change Input Placeholder Color With 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.