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.
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.