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! 😃