To change the input tag placeholder text color, we can use the ::placeholder pseudo-element in the CSS.

Let's imagine you have an input tag with placeholder text called Enter Email.. like this,

<!-- Input Tag with placeholder text -->
<input type="text" placeholder="Enter Email..." class="myInput" />

As you can see that we have added a class called myInput to the input tag now let's reference the input tag with the ::placeholder pseudo element in the CSS and set the color property to the color we want. In our case, let's go with the blue color.

It can be done like this,

/* Change Input Tag Placeholder text */
.myInput::placeholder {
  color: blue;
}

Yay! We have successfully changed the placeholder text color! 🎊

See the above example live in JSBin.

In Firefox for some reasons, they decreases the opacity a little bit so let's use the opacity property to make it fully visible like this,

.myInput::placeholder {
  color: blue;
  opacity: 1; /* For Firefox */
}

To make it work on the on Microsft Edge browsers we can use this code in addition to the above,

.myInput::placeholder {
  color: blue;
  opacity: 1; /* For Firefox */
}

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

That's all! 😃

Feel free to share if you found this useful 😃.

---