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

• 
  Finding The Login Form Based On Content
• 
  Inserting Data Into Mysql Using Php
• 
  Need To Convert Vb 6 Forms To Html Forms
• 
  Utf-8 Encoding With Form Post And Spring Controller