Styling HTML5 Placeholder using CSS

Posted on Saturday August 18, 2012 / by Eric Potvin

One of the cool new feature in HTML5 is the placeholder. This feature allow to display any text in an form field (input and text area) and when a user focus in the field, it disappear and reappear if the field is empty. Before, if we wanted this feature, we had to create JavaScript code to manipulate and validate what the user enters and display the information.

I realized the colour is always the same and I wanted to make it more appealing.

But how can I change it to something like this:

Every browsers use different pseudo selectors.

CSS

::-webkit-input-placeholder {
  color: #908681;
  font-size: 10px;
  text-transform:uppercase;
}
input:-moz-placeholder {
  color: #908681;
  font-size: 10px;
  text-transform:uppercase;
}
:-ms-input-placeholder {
  color: #908681;
  font-size: 10px;
  text-transform:uppercase;
}

Not all the CSS properties (link to learn css) are available for the placeholder. Keep it as simple as possible, after all it is just a label that will disappear once the user write something in these fields.