A placeholder text in inputs and text areas gives a hint to the user what kind of value does the input expects. The default color for this placeholder text in most of the browsers is light grey.
However, sometimes you might want to change the default color of the placeholder to something else when the input is in focus.
To change the placeholder color of inputs and text areas we use the ::placeholder pseudo-element. But we want to change the color of the placeholder only when the input gets focused.
Therefore, we have to combine the ::placeholder with the :focus pseudo-class.
The following example changes the input placeholder color to red as soon it gets focused:
Example:
input:focus::placeholder{
color: red;
}
Some of the old browser versions might not support the ::placeholder pseudo-element directly. In that case, you have to use browser prefixes.
This is how you can do it:
Example:
input:focus::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: red;
}
input:focus:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
}
input:focus::-ms-input-placeholder { /* Microsoft Edge */
color: red;
}
Just like the inputs, you can also change the placeholder color of the text areas.
See this example:
Example:
textarea:focus::placeholder{
color: red;
}
