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

You may like these posts

• 
  Opening Viewcontroller When Click On Button In Uiwebview Swift
• 
  Get The Corresponding Row Values For Check Box Checked Row In Grid View Using Javacsript
• 
  How Can I Convert Markdown To Html (should I Use An Existing Script)?
• 
  How To Prevent A Page From Jumping To Top When Showing Or Hiding Elements Using Jquery Fade Option