How do you style the HTML5 form validation messages?

Question

Say you have some HTML like this:

<form>     <input placeholder="Some text!" required>     <input type="email" placeholder="An Email!" required>     <input type="submit" value="A Button!"> </form> 

Because of the required attributes, newer Webkits and Firefoxes show a validation message next to the field if you leave it blank.

They respond to being styled by a rule such as:

div {     font: Helvetica; } 

But I can't find a more specific selector for them. Does anyone know what selector is used, or will be used, or even a bug report for webkit/gecko relating to this?

( JSFiddle showing that they can be styled with a div selector: http://jsfiddle.net/p7kK5/ )

Answer 1

Update: Chrome does not allow styling form validation bubbles anymore: https://code.google.com/p/chromium/issues/detail?id=259050

In the latest iterations of Chrome, support has been added for pseudo selectors for these, namely;

::-webkit-validation-bubble{} ::-webkit-validation-bubble-top-outer-arrow{} ::-webkit-validation-bubble-top-inner-arrow{} ::-webkit-validation-bubble-message{} 

For more information on these, check out the Webkit "Styling Form Controls" trac page.

Additionally, firefox has support for the element attribute x-moz-errormessage which enables you to change the text of the error message, which is something you could do in Chrome using CSS to and -webkit-validation-bubble-message. See more about x-moz-errormessage on the MDN Docs page.

As of yet, Firefox has no way to style the error bubbles.