To change the text color of the HTML placeholder we can use ::placeholder css property. Most of the modern browsers support this pseudo-class. But still it requires some separate rules for each browsers.Here are the ways to declare css for different browsers
::-webkit-input-placeholder { /* WebKit, Blink, Edge /
color:#909;
}
:-moz-placeholder { / Mozilla Firefox 4 to 18 /
color: #909;
opacity: 1;
}
::-moz-placeholder { / Mozilla Firefox 19+ /
color: #909;
opacity: 1;
}
:-ms-input-placeholder { / Internet Explorer 10-11 /
color: #909;
}
::-ms-input-placeholder { / Microsoft Edge /
color: #909;
}
::placeholder { / Most modern browsers support this now. */
color: #909;
}Firefox’s placeholder has a reduced opacity by default, so needs to use opacity: 1 here.Internet Explorer 9 and lower does not support the placeholder attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.
