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?

Faustinafaustine

Is there a way to get "placeholder" behavior at all without JavaScript? – Drily

Duplicate of: #2610997 – Gurule

@Drily Yes, as Mild Fuzz says, it's in HTML5. This, for example, already works in Chrome. – Geraldina

@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. – Geraldina

Answer 1

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

Bowler

Thanks for the helpful info. Is there a variant for IE9 ? – Anjanetteanjela

IE9 doesn't support placeholder. – Bowler

You can probably assume ::-ms-input-placeholder and ::placeholder for future compatibility. – Urticaria

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. – Bowler

Answer 2

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.

Guardant