The reason, why you can style the error bubble with a div-selector is a bug in Chrome 11/12, which should be fixed in newer versions. There are some pseudoclasses to style the error bubble in Chrome 12 (and maybee in Safari6) (::-webkit-validation-bubble etc.). You can find the full HTML structure including the pseudoelement selectors and some styling examples in the following document.
Note, that this is a webkit extension to the HTML5 form constraint validation and non-standard. If you want to use a way to style the error message in all HTML5 validation supporting browsers, you have to use JavaScript.
The key principle of this, is that you have to add a handler to the invalid-event (Note: The invalid event does not bubble) and then prevent the default interaction. This will remove the browsers native error bubble and you are able to implement a custom styleable UI in all HTML5 browsers.
//Note: that we use true for useCapture, because invalid does not bubble
document.addEventListener('invalid', function(e){
//prevent the browser from showing his error bubble
e.preventDefault();
//now you can implement your own validation UI (showError is a Custom method which has to be implemented by you
showError(e.target, $.prop(e.target, 'validationMessage');
}, true);
The code above will call showError for all invalid elements in the current form. If you want to do this only for the first invalid element you can do the following:
document.addEventListener('invalid', (function(){
var isFirst = true;
return function(e){
//prevent the browser from showing his error bubble
e.preventDefault();
//now you can implement your own validation UI
if(isFirst){
showError(e.target, $.prop(e.target, 'validationMessage');
//set isFirst to false
isFirst = false;
//reset isFirst to true, so user can try to submit invalid forms multiple times
setTimeout(function(){
isFirst = true;
}, 9);
}
};
})(), true);
In case you are using jQuery for your site, I would recommend using webshims lib. webshims lib implements the HTML5 constraint validation in all browsers (including IE6) and gives a simple extension for generating a simple custom styleable validation message. The JS code looks like this:
$(document).bind('firstinvalid', function(e){
$.webshims.validityAlert.showFor( e.target );
//prevent browser from showing native validation message
return false;
});
The HTML-structure generated by $.webshims.validityAlert.showFor looks like this:
<span class="validity-alert" role="alert">
<span class="va-arrow"><span class="va-arrow-box"></span></span>
<span class="va-box">Error message of the current field</span>
</span>
