Change input's placeholder color with CSS

We can define placeholder color with the pseudo element or pseudo class. Don't use input[placeholder] as it does not specify properties for the placeholder but for the normal text.

By default the color of placeholder text varies from browser to browser but the default placeholder color for chrome is #a9a9a9.

We will use the following methods to define the input's placeholder color for every browser.

::placeholder pseudo class

See how ::placeholder pseudo class changes the input's placeholder color.

<style>
input::placeholder{
 color:blue;
 font-size:18px;
}
</style>
Try </>

In the same way you can also define other properties for the input placeholder such as font-size, background-color.

Some browsers don't accept the above syntax. So we have to use the following syntax that is compatible for all the other browsers.

<style>
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: blue;
}
input::-moz-placeholder { /* Mozilla Firefox browser */
   color: blue;
}
input::-ms-input-placeholder { /* For Microsoft */
   color: blue;
}
input::placeholder { /* All the modern browsers support this property */
   color: red;
}
</style>
Try </>

The above syntax was specified for the input element only. It may also be specified for all the elements.

<style>
*::placeholder{
 color:blue;
 font-size:18px;
}
</style>
Try </>

* means that CSS properties apply to all of the elements that have placeholder attribute.

:placeholder-shown pseudo element

In this case, an exception exists for the placeholder text color. The :placeholder-shown pseudo element defines CSS properties for the placeholder except color.

<style>
input::placeholder-shown{
 color:blue;
 font-size:16px;
}
</style>
Try </>

In the above case, color will not be blue but the font-size will be 16px for placeholder text. In this case, the color of cursor will be red but not the placeholder text.