How to change input's placeholder color with CSS

The default color of a input's placeholder text is light grey in most browsers. Sometimes, we want to change the default color. If you are thinking about that, in this article I shall explain how you can change the placeholder color .

Change input placeholder text color using css
Try it Yourself »
  1. Create an input element with a placeholder attribute.
  2.     <input type="text" placeholder="Enter Your Name"/>
      
  3. Inside the <style> style the placeholder with ::placeholder pseudo class.
  4.     <style>
             ::placeholder{
                color:red;
             }
        </style>
      

To change the placeholder text opacity, use opacity:0.5 property. If you want to change the placeholder background color, border etc., you can also do that.

Don't forget to remember that for each browser there is a different way to implement. For example
::-webkit-input-placeholder Safari, Google Chrome.
::-ms-input-placeholder Microsoft Edge, Internet Explorer.
::placeholder all modern browsers support this.