How to change input element placeholder color in css

How to change input element placeholder color in css

In this tutorial, we are going to learn about how to change the placeholder color in css using ::placeholder pseudo-element selector.

::placeholder

In css, we have ::placeholder pseudo-element selector by using that we can change the placeholder color of an input or textarea element.

By default user-agent styles the placeholder text color to light-grey.

Let’s see an example.

Html

<input placeholder="Name"/>

Css

::-webkit-input-placeholder { /* WebKit, Blink, Edge,Chrome */
    color: green;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: green;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: green;
}

::-moz-placeholder { /* Firefox 19+ */
  color: green;
  opacity:  1;
}

::placeholder { /* Modern browsers */
  color: green;
}

By default, firefox reduces the placeholder text opacity so that we have added opacity:1 to the firefox selector.