Change a Html5 Input's Placeholder Color with Css
Chrome Supports the Placeholder Attribute on Input[Type=Text] Elements (Others Probably Do Too). but the Following Css Doesn't Do Anything to the Placeholder's...
Chrome supports the placeholder attribute on input[type=text] elements (others probably do too).
But the following CSS doesn't do anything to the placeholder's value:
input[placeholder], [placeholder], *[placeholder] {
color: red !important;
}<input type="text" placeholder="Value">But Value will still remain grey instead of red.
Is there a way to change the color of the placeholder text?
44 Answers
Implementation
There are three different implementations: pseudo-elements, pseudo-classes, and nothing.
- WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element:
::-webkit-input-placeholder. [Ref] - Mozilla Firefox 4 to 18 is using a pseudo-class:
:-moz-placeholder(one colon). [Ref] - Mozilla Firefox 19+ is using a pseudo-element:
::-moz-placeholder, but the old selector will still work for a while. [Ref] - Internet Explorer 10 and 11 are using a pseudo-class:
:-ms-input-placeholder. [Ref] - April 2017: Most modern browsers support the simple pseudo-element
::placeholder[Ref]
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.
The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the pseudo-element.
Robert Thorne covers electric vehicle innovations, autonomous driving systems, global mobility trends, and automotive engineering developments.
