Change input’s placeholder color with CSS
Most modern browsers support the simple pseudo-element:
::placeholder {
color: #9400d3;
}
but what if you need to apply color to a placeholder in older browsers?
WebKit, Blink, and Edge
WebKit, Blink (Safari, Google Chrome, Opera 15+), and Microsoft Edge are using a pseudo-element ::-webkit-input-placeholder
::-webkit-input-placeholder {
color: #9400d3;
}
Mozilla Firefox 4 to 18
Using a pseudo-class: :-moz-placeholder
:-moz-placeholder {
color: #9400d3;
opacity: 1;
}
Firefox’s placeholder appears to be defaulting with reduced opacity, so needs to use opacity: 1
here.
Mozilla Firefox 19+
Using a pseudo-element: ::-moz-placeholder
, but the old selector will still work for a while.
::-moz-placeholder {
color: #9400d3;
opacity: 1;
}
Internet Explorer 10-11
Using a pseudo-class: :-ms-input-placeholder
:-ms-input-placeholder {
color: #9400d3;
}