override css for html5 form validation/required popup

Question

How can I override the default popup for a required field on a HTML5 form?

Example: http://jsfiddle.net/uKZGp/ (make sure you click the submit button to see the popup)

The HTML

<form>
<input type="text" name="name" id="name" placeholder="Name*" required="required" />
<input type="submit" />
</form>

NOTE: You must view this with a HTML5 browser like Google Chrome or FireFox.

This link doesn't solve my question but it might make someone think outside of the box:

• http://www.the-art-of-web.com/html/html5-form-validation/
• http://adhockery.blogspot.com/2011/03/styling-with-html5-form-validation.html

Answer 1

It's impossible to change the validation style with only HTML5/CSS3.

It's part of the browser. The only attribute I figured out to change is the error message by using this example:

 document.getElementById("name").setCustomValidity("Lorum Ipsum");

But, as shown in this example : http://jsfiddle.net/trixta/qTV3g/, you can override the panel style by using jQuery. This is not a plugin, it's a core functionality, uses a DOM lib called Webshims and, of course, some CSS to style the popups.

I found that very useful example in this bug post titled Improve form validation error panel UI.

I think this is the best solution you can find and only way to override the basic (ugly) error panel.

Regards.