Mark Wyner’s journal

Find me at Bunker

I like to talk endlessly about anything related to the design and development of websites and mobile apps, technology, and the creative industry, which may tickle your fancy.

Tuesday, January 10, 2012

Formatting HTML5 Placeholder Text

With HTML5 quickly becoming a standard there are lots of new techniques we’ll need to learn to master both its form and function. I just discovered an awesome CSS pseudo-class for styling text created with the HTML5 attribute placeholder:

input::-webkit-input-placeholder {
   color: #bdc4d1;
}
input:-moz-placeholder {
   color: #bdc4d1;
}

Currently this is only supported by Safari and Firefox (as noted with the vendor prefixes) but it’s benign that other browsers disregard the formatting. Using it simply affords some people a more aesthetic experience and helps fine tune a website or mobile-web app for the future.