CODEWITHSUNDEEP
formshtmlcssplaceholder
Mild Fuzz
Mild Fuzz

Reputation: 30681

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

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?

Upvotes: 6

Views: 3203

Answers (2)

Mehdi Raash
Mehdi Raash

Reputation: 8985

enter image description here 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.

Upvotes: 2

Lea Verou
Lea Verou

Reputation: 23887

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

Upvotes: 6

Related Questions