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.
- Posted 8:00 am
- Permanent Link
- Tagged #html5 #css3 #css #pseudo class #vendor prefixes #safari #firefox #placeholder #forms #interface