The default placeholder color for inputs and text areas in most of the browsers is light grey. But, you can easily change this default text color and set your own colors.
To change the input placeholder color we use the ::placeholder pseudo-element in combination with the color property.
The following example sets the input placeholder color to red:
Example:
input::placeholder{
color: red;
}
If you are using firefox, you have to explicitly set the opacity to 1. This is because the firebox browser lowers the opacity of placeholder text by default.
Also, some of the browser versions might not support the ::placeholder. Therefore, you have to be browser-specific to avoid any cross-browser compatibility issues.
This is how you can do it:
Example:
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: red;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: red;
}
Just like the input placeholder, you can also change the color of the text area’s placeholder.
See this example:
Example:
textarea::placeholder{
color: red;
}
