How Do You Style The HTML5 Form Validation Messages?

Say you have some HTML like this:

Solution 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.

Solution 2:

You'll need to use more specific selectors for everything else I'm afraid.. body > div etc.

Share