How do you style the HTML5 form validation messages?

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:

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 http://trac.webkit.org/wiki/Styling%20Form%20Controls. 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 https://developer.mozilla.org/en/HTML/element/input#section_5. As of yet, Firefox has no way to style the error bubbles.

Rich Bradshaw at Stack Overflow Visit the source

Was this solution helpful to you?