Design, CG Graphics & Inspiration
HTML5 Placeholder stylization with the help of CSS

HTML5 Placeholder stylization with the help of CSS

HTML5 has a wonderful attribute – placeholder (text prompts for input elements). It can be specified in a following way:

<input type=«text» <strong>placeholder</strong>=«type here some text» />

Typically, this text is displayed with grey color, but let’s say we have a need to stylize the text using CSS.
While this can be done only in Google Chrome, Safari and Firefox, in Opera as yet there is no opportunity specify the styles, and IE doesn’t 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 for webkit is necessary to write two colons, and for mozilla there should be only one.

A few more examples:

/* styles for 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;
}

/* styles for 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;
}

Also note that different browsers have different styles of support for placeholders. For example, in Firefox you can set its background color, but not in Chrome.

The 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 no no + no + no
border no no + no + no
color + + + no + no
font-size + + + no + no
font-style + + + no + no
font-weight + + + no + no
letter-spacing + + + no + no
line-height no no no no no no
padding top/bottom no no + no + no
padding left/right no no + no no no
text-decoration no no + no + no
text-transform no no + no + no

Demo

  • ga4o,
  • July 1, 2011

SHARE THIS POST

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.