Popular Posts

Thursday, August 25, 2011

HTML 5 Validation Messages

HTML 5 Validation Messages Styling

So many Web Designers using Html 5 absolutely love every second of it, but it does have it's negatives, like older browsers do not support any Html 5 lingo...

One useful thing that I've been using is the HTML 5 Validation Messages, they improve the speed of development and no need for jQuery, whoo hoo! Okay wait, I cant style these awesome Validation Messages, oh but wait, YOU CAN! only in Chrome though, yes Firefox will soon catch on, and 5 years from now IE will hopefully actually realise what Html 5 is :)

The styling.

Suppose that you want to modify colors of the validation messages bubble. Add the following CSS declarations...

::-webkit-validation-bubble-message { color: #eee; background: #000; border-color: #444; -webkit-box-shadow: 0 0 5px #444;
} ::-webkit-validation-bubble-arrow { background: #000; border-color: #444; -webkit-box-shadow: 0 0 5px #444;

Some more styling...

::-webkit-validation-bubble-message { color: #eee; background: #000; border-color: #444; -webkit-box-shadow: 4px 4px 4px rgba(100,100,100,0.5); } ::-webkit-validation-bubble-message:before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 4px; background: urlimages.png) } ::-webkit-validation-bubble-arrow { background: #000; border-color: #444; -webkit-box-shadow: 0 0 5px #444; }

So there you have it, easy, simple and now we must just wait for Firefox and IE and all the other browsers to catch on! Whoo hoo, go Chrome!

No comments: