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;
}












PREVIEW






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!