How to change input's placeholder color with CSS

Question

Apu June 03, 2023 . #css . #HowTo

❌

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 »

Create an input element with a placeholder attribute.

    <input type="text" placeholder="Enter Your Name"/>

Inside the <style> style the placeholder with ::placeholder pseudo class.

    <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.

Write Your Answer

Apu · Accepted Answer · 2023-06-03T07:47:09+05:30

The default color of a input's placeholder text is light grey in most browsers. Some…