Home Change an HTML5 input's placeholder color with CSS
Reply: 0

Change an HTML5 input's placeholder color with CSS

user10782
1#
user10782 Published in September 20, 2018, 1:26 pm

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">

Value will still remain grey instead of red.

Is there a way to change the color of the placeholder text?

share|improve this question
  • 356
    Quick heads-up (not a solution, just a FYI): if I recall correctly, input[placeholder] just matches <input> tags that have a placeholder attribute, it doesn't match the placeholder attribute itself. – pinkgothic Apr 9 '10 at 19:58
  • 11
    Yah, the thought crossed my mind that this may be like trying to style an element's "title" attribute. So +1 for thinking alike! – David Murdoch Apr 9 '10 at 20:01
  • 4
    @MathiasBynens The :placeholder-shown pseudo-class matches an input element that is showing such placeholder text. So it matches <input> tag, like input selector, but showing placeholder text just now. It also doesn't match the placeholder attribute itself. – HEX Jan 18 '16 at 12:55
  • 3
    @HEX It’s not like the input selector because that selects all input elements. :placeholder-shown only selects input elements that are currently showing the placeholder, allowing you to style those elements only, and effectively style the placeholder text. What are you trying to say? – Mathias Bynens Jan 19 '16 at 14:19
  • 1
    @HEX (Of course, it also selected textarea elements that are showing placeholder text.) – Mathias Bynens Jan 21 '16 at 10:18

31 Answers 31

active oldest votes
1 2 next
up vote 4560 down vote accepted
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.579378 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO