39

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

TylerH
  • 20,799
  • 66
  • 75
  • 101
Kyle
  • 21,377
  • 37
  • 113
  • 200

4 Answers4

11

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

alex
  • 479,566
  • 201
  • 878
  • 984
Ramin
  • 223
  • 4
  • 10
5

There is currently no way to achieve this.

Chrome up until version 27 provided a native look and feel for their validation error speech bubbles. The error bubble is made up of four containing elements that are not normative elements. These four elements are style-able 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 

With the release of Chrome v28, they removed these non-standard selectors: https://bugs.chromium.org/p/chromium/issues/detail?id=259050

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
Estelle
  • 69
  • 1
  • 2
1

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 Developer Network

TylerH
  • 20,799
  • 66
  • 75
  • 101
Remixz
  • 143
  • 1
  • 5
  • 28
    This answer (as with all others) appears to miss the question. The question is not how to style the form input based on its validation status. The question is how to style the error messages that are displayed by the browser, e.g. _"Please fill out this field."_ in Chrome. – Phrogz Apr 28 '11 at 03:46
0

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

GANI
  • 2,013
  • 4
  • 35
  • 69