How do I style the HTML5 form validation error messages with CSS?

Question

How do I style the HTML5 form validation error messages with CSS?

Answer 1

Currently, there is no way to style those little validation tooltips. The only other option, which is what I have chosen to do, is to disable the browser validation all together for now and rely on my own client-side validation scripts.

According to this article: http://blog.oldworld.fr/index.php?post/2010/11/17/HTML5-Forms-Validation-in-Firefox-4

"The simplest way to opt out is to add the novalidate attribute to your <form>. You can also set formnovalidate on your submit controls."

Answer 2

Chrome provides a native look and feel for their validation error speach bubbles. The error bubble is made up of four containing elements that are not normative elements. These four elements are stylable via pseudo-elements that apply to separate sections of the bubble:

::-webkit-validation-bubble

::-webkit-validation-bubble-arrow-clipper 

::-webkit-validation-bubble-arrow 

::-webkit-validation-bubble-message 

---

Update: This method is obsolete.

Answer 3

Use pseudo selectors, as easwee said. For example, to make the form element green when valid, and red when invalid, do something like this:

:invalid {
    background: #ffdddd;
         }
:valid{
      background:#ddffdd;
      }

If you need a full reference of these, head to Mozilla's reference.

P.S. Sorry if I'm doing these answers wrong, I'm new to this community.

Answer 4

A required field will be invalid until the correct input is entered. A field that isn't required but has validation, such as a URL field, will be valid until text is entered.

 input:invalid { 
border:solid red;
}

for more info http://msdn.microsoft.com/en-us/library/ie/hh772367(v=vs.85).aspx

Answer 5

For Google Chrome, it is not possible to style validation messages any more: https://code.google.com/p/chromium/issues/detail?id=259050