CODEWITHSUNDEEP
htmlcssformsvalidation
Kyle
Kyle

Reputation: 22035

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

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

Upvotes: 43

Views: 61412

Answers (4)

Estelle
Estelle

Reputation: 79

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

Upvotes: 6

Remixz
Remixz

Reputation: 139

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

Upvotes: -1

GANI
GANI

Reputation: 2049

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

Upvotes: -2

Ramin
Ramin

Reputation: 243

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

Upvotes: 13

Related Questions