Yes, there is a way to change the color of the placeholder text in your HTML5 form inputs. This can be done by using the ::placeholder pseudo-element.
You would generally use it like so:
For backward compatibility, it is good to know that there are some caveats to be aware of.
- WebKit, Blink (Safari 5+, Google Chrome 4+, Opera 15+) and Microsoft Edge 79+ are using a pseudo-element: ::-webkit-input-placeholder.
- Mozilla Firefox 4 to 18 uses the pseudo-class : :-moz-placeholder
- Mozilla Firefox 19+ uses the pseudo-element ::-moz-placeholder, but the old selector will still work for a while.
- Internet Explorer 10 and 11 are use the pseudo-class: :-ms-input-placeholder.
Seeing User agents are required to ignore a rule with an unknown selector, web developers must separate the rules for each browser otherwise the whole group would be ignored by all browsers. See this example:
Note above that the rules for Firefox include opacity. This is because Firefox’s placeholder appears to be showing with reduced opacity, so needs we need to use opacity: 1 here to control it.
Here is an example of the HTML input affected by the CSS rules above used to change the placeholder color.