HTML5 placeholder styling with CSS

HTML5 has a remarkable attribute - placeholder (text hint for input elements). It is set as follows:

<input type = "text" placeholder = "type here some text" />

Usually this text is displayed in gray, but let's say we have to stylize this text with CSS.

So far this can only be done in Google Chrome, Safari and Firefox, since Opera does not yet have the ability to set styles for it, and IE does not support it at all.

CSS rules for webkit and mozilla:

input::-webkit-input-placeholder {}
input:-moz-placeholder {}


Just keep in mind that you cannot combine these selectors into one, and if you write:

input:-moz-placeholder,
input::-webkit-input-placeholder { }


then CSS rules will not work. And note that you need to write two colons for webkit, and one for mozilla.
')

Some more examples:

/* webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder {
color:#090;
background:lightgreen;
text-transform:uppercase;
}
#field4::-webkit-input-placeholder {
font-style:italic;
text-decoration:overline;
letter-spacing:3px; color:#999;
}

/* mozilla */
#field2:-moz-placeholder { color:#00f; }
#field3:-moz-placeholder {
color:#090; background:lightgreen;
text-transform:uppercase;
}
#field4:-moz-placeholder {
font-style:italic;
text-decoration:overline;
letter-spacing:3px;
color:#999;
}


It should also be noted that different browsers support styles for the placeholder in different ways. For example, in Firefox, you can set a background color for it, but not in Chrome.

List of supported CSS styles for the placeholder attribute:

	Chrome 10 (Win 7)	Chrome 11 (Win 7)	Firefox 4 (Win 7)	Safari 3.1 (Win XP & OS X)	Safari 5 (Win 7 & OS X)	Opera 11 (Win 7)
background-color	not	not	+	not	+	not
border	not	not	+	not	+	not
color	+	+	+	not	+	not
font-size	+	+	+	not	+	not
font-style	+	+	+	not	+	not
font-weight	+	+	+	not	+	not
letter-spacing	+	+	+	not	+	not
line-height	not	not	not	not	not	not
padding top / bottom	not	not	+	not	+	not
padding left / right	not	not	+	not	not	not
text-decoration	not	not	+	not	+	not
text-transform	not	not	+	not	+	not