之所以可以使用 div-selector 设置错误气泡样式，是因为 Chrome 11/12 中的一个错误，它应该是 fixed in newer versions。在 Chrome 12 中有一些伪类来设置错误气泡的样式（也许在 Safari6 中）（::-webkit-validation-bubble 等）。您可以在following document 中找到完整的 HTML 结构，包括伪元素选择器和一些样式示例。
注意，这是对 HTML5 表单约束验证和非标准的 webkit 扩展。如果您想在所有支持 HTML5 验证的浏览器中使用一种方式来设置错误消息的样式，则必须使用 JavaScript。
这样做的关键原则是，您必须为无效事件添加处理程序（注意：无效事件不会冒泡）然后阻止默认交互。这将删除浏览器的原生错误气泡，您可以在所有 HTML5 浏览器中实现自定义样式的 UI。
//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);
上面的代码将对当前表单中的所有无效元素调用 showError。如果您只想对第一个无效元素执行此操作，您可以执行以下操作：
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);
如果您在网站上使用 jQuery，我建议您使用 webshims lib。 webshims lib 在所有浏览器（包括 IE6）中实现了 HTML5 约束验证，并提供了一个简单的扩展来生成简单的自定义样式验证消息。 JS 代码如下所示：
$(document).bind('firstinvalid', function(e){
$.webshims.validityAlert.showFor( e.target );
//prevent browser from showing native validation message
return false;
});
$.webshims.validityAlert.showFor 生成的 HTML 结构如下所示：
<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>