HTML5 Form Text Placeholders - Do they have a CSS pseudo-class?

Question

Reading an article about HTML5, it occurs to me that while placeholders are incredibly useful in form usability, if they can not be targeted with CSS without javascript, they really are a baby step.

So can I target the placeholder in CSS to look differently from inputted text?

Is there a way to get "placeholder" behavior at all without JavaScript? — Pointy, Feb 01 '11 at 14:46
Duplicate of: http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css — Jon Hadley, Feb 01 '11 at 14:56
@Pointy Yes, as Mild Fuzz says, it's in HTML5. [This, for example](http://jsfiddle.net/jnzhe/), already works in Chrome. — Matt Gibson, Feb 01 '11 at 14:56
@Jon Good find; I've tagged that older question with "pseudo-class" now to make it easier to find; strikes me that's the important term that's missing from that question. — Matt Gibson, Feb 01 '11 at 14:59

score 6 · Accepted Answer · answered Feb 01 '11 at 15:00

6

Webkit uses a ::-webkit-input-placeholder pseudoelement. Moz uses a :-moz-placeholder pseudoclass.

answered Feb 01 '11 at 15:00

Lea Verou

23,130
9
44
47

Thanks for the helpful info. Is there a variant for IE9 ? – Lea Hayes Apr 12 '11 at 20:35
2

IE9 doesn't support placeholder. – Lea Verou Apr 13 '11 at 17:34
Thanks for clarifying that for me. – Lea Hayes Apr 13 '11 at 18:20
You can probably assume ::-ms-input-placeholder and ::placeholder for future compatibility. – Jason T Featheringham Jan 17 '12 at 21:32
1

No you can't. You'd be taking a gamble. None of these is standardized, and they're not even compatible with each other. There's nothing indicating that IE will adopt WebKit's approach or that the standard will be a mix of both. – Lea Verou Jan 19 '12 at 03:28

score 2 · Answer 2 · answered May 29 '17 at 13:46

I assume you have got something like this in your HTML

<input type="text" name="name" />

The corresponding css would be

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: blue;
}
input::-moz-placeholder { /* Firefox 19+ */
  color: blue;
}
input:-ms-input-placeholder { /* IE 10+ */
  color: blue;
}
input:-moz-placeholder { /* Firefox 18- */
  color: blue;
}
input:placeholder { 
  color: blue;
}

I also encourage you taking a look at

input:placeholder-shown {
  border: 5px solid red;
}

This is a good resource.

HTML5 Form Text Placeholders - Do they have a CSS pseudo-class?

2 Answers2