Styling HTML5 Placeholder using CSS

One of the cool new feature in HTML5 is the placeholder. This feature allows to display any text in a form field (input and text area) and when a user focus in the field, it disappears 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.

• ::-webkit-input-placeholder for webkit browsers like Safari or Chrome
• :-moz-placeholder for mozilla browsers like Firefox
• :-ms-input-placeholder for Internet Explorer 10 (August 2012)
• As of this day, Opera doesn't support styling placeholder

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.