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.
– pinkgothicApr 9 '10 at 19:58

12

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 MurdochApr 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.
– HEXJan 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 BynensJan 19 '16 at 14:19

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.

CSS selectors

User agents are required to ignore a rule with an unknown selector. See Selectors Level 3:

Usage notes

Be careful to avoid bad contrasts. Firefox's placeholder appears to be defaulting with a reduced opacity, so needs to use opacity: 1 here.

Note that placeholder text is just cut off if it doesn’t fit – size your input elements in em and test them with big minimum font size settings. Don’t forget translations: some languages need more room for the same word.

Browsers with HTML support for placeholder but without CSS support for that (like Opera) should be tested too.

Some browsers use additional default CSS for some input types (email, search). These might affect the rendering in unexpected ways. Use the properties-webkit-appearance and -moz-appearance to change that. Example:

Note also that although Webkit considers this to have rather strong specificity, Mozilla does not. You are likely to have to pop a few !importants in there to get things to show up.
– dmncSep 5 '11 at 14:38

18

@toscho: thanks for the great answer. I just needed a little demonstration of it "live", so your example can also be reached here: jsfiddle.net/Sk8erPeter/KyVXK. Thanks again.
– Sk8erPeterJan 27 '13 at 1:39

89

Firefox's placeholder appears to be defaulting with a reduced opacity. For anyone else hard-refreshing and wondering why the heck this doesn't appear to be working ("why is my white text still grey.."), use opacity:1
– jwinnApr 3 '13 at 18:33

8

In IE10 *:-ms-input-placeholder and :-ms-input-placeholder by itself does not work, but INPUT:-ms-input-placeholder does. Odd.
– JaredDec 13 '13 at 3:55

35

Note for Bootstrap 3: "form-control" class overrides the color due to CSS specificity (i.e. "form-control::-webkit-input-placeholder"), so you need to be at least as specific or use "!important" in your CSS. (this was hell to debug as neither Firebug nor Devtools seem to show this pseudo class)
– CostaOct 6 '14 at 22:42

MSDN doc you linked to, states its only supported in Internet Explorer 10. Still a good find, but not very useful till IE10 userbase becomes significant (we may be looking at a time-frame of years for that).
– danishgoelMar 14 '12 at 20:44

1

Realistically, you are going to want to style placeholders across the site uniformly, not style every individual input by ID.
– BadHorsieSep 10 '13 at 11:03

10

After FF19 you have to use ::-moz-placeholder
– viplezerOct 6 '13 at 13:22

1

You need to put this CSS at the bottom of you stylesheet, if you also apply a class on the input, in order to get it working on IE (11). See this fork on JSFiddle jsfiddle.net/9kkef. Open the page both in IE and another browser, in IE you will see that the placeholder text will be in the color of the applied class.
– Timo002Jul 2 '14 at 7:44

Or even simpler, edit the variable @input-color-placeholder - usually found in variables.less
– WilliamOct 8 '14 at 21:55

@William wouldn't it be easier to define the selector itself and use the mixin to avoid having to go back and change it in case you're looking to make another input's placeholder a different colour?
– BranditoFeb 18 '18 at 22:49

@Brandito - that sounds like an edge case - generally placeholder color is the same for all form elements within a design.
– WilliamFeb 20 '18 at 0:17

@William Sorry I'm terrible at wording this sorta stuff, I thought it would've it be better to use the mixin with the argument of the input colour you desire although quite honestly, I'm probably thinking of the edge cases I'm used to (styling the search input placeholder where it's on a coloured background :P) so sorry but you're right, apologies.
– BranditoFeb 20 '18 at 1:11

This works in Firefox 51. I'm just going to use this method; the other browsers will catch up soon enough for me (given that no functionality is broken if the to-be-standard style is not applied).
– Lonnie BestFeb 27 '17 at 8:39

This is the old way of doing it, which I've used quite a bit. The disadvantage is that the placeholder text disappears when you focus. I've found this to be annoying when the UI doesn't also include labels next to the input. Over the past several months I've started replacing this method with using placeholder text, which I think is a UX improvement.
– RedtopiaDec 10 '13 at 19:31

4

The other problem with code like this is your serverside code has to deal with placeholder text as empty input, which has problems with edge cases where you want to enter a town called "Town". Instead of checking values against the placeholder text you should really use a data-modified flag on the input, and then clear the input on form submit if the flag is not set. And for AJAX interfaces you may not even have a form, so you should be able to associate an arbitrary submission event with the input. This is one of those really simple situations that isn't.
– WhelkaholismMar 7 '14 at 13:16

Even your second version doesn't provide the same functionality. If the user submits the <form> with this input the placeholder text will be sent to the server. I seen so many sites do this wrong.
– lqcMay 30 '13 at 8:35

This is dangerous! If you come back again to the form you lost everything!
– Mobarak AliMay 15 at 15:10

This property allows you to specify a fill color for text. If it is not set, then the color property will be used to do the fill. It sounds to me like you've got some other CSS rule that is setting the color property.
– David MurdochAug 5 '15 at 10:25

OK, placeholders behave differently in different browsers, so you need using browser prefix in your CSS to make them identical, for example Firefox gives a transparency to placeholder by default, so need to add opacity 1 to your css, plus the color, it's not a big concern most of the times, but good to have them consistent:

Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).