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

Question

This has been answered here: http://stackoverflow.com/questions/5713405/how-do-you-style-the-html5-form-validation-messages/5965505#5965505 It only works in Chrome at the moment. — Ben, Jun 17 '11 at 05:25

score 11 · Answer 1 · edited Sep 23 '11 at 03:05

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

edited Sep 23 '11 at 03:05

alex

460,746
196
858
974

answered May 20 '11 at 13:54

Ramin

223
4
10

Another reference: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#Customized_error_messages – 1.21 gigawatts Jul 01 '19 at 17:14

score 5 · Answer 2 · edited Aug 11 '21 at 07:06

5

Update: This method is obsolete.

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

edited Aug 11 '21 at 07:06

Mark Fisher

813
1
10
27

answered Jul 02 '11 at 08:15

Estelle

69
1
2

Chrome's validation error bubbles don't look native to me. They look so ugly (before Chrome 15). – XP1 Sep 11 '11 at 10:41
setting these to display:none crashes chrome – Peter Ehrlich Feb 04 '12 at 07:35
I've opened a bug for the crash, see http://code.google.com/p/chromium/issues/detail?id=117746 – Ronny Mar 11 '12 at 21:35
If you care about fixing this on Firefox, please vote on the bug: https://bugzilla.mozilla.org/show_bug.cgi?id=845405 – Robin Winslow Feb 26 '13 at 17:39
4

It seems that this solution has stopped working with Blink: https://code.google.com/p/chromium/issues/detail?id=259050 – Nacho Coloma Sep 10 '13 at 11:36

score 3 · Answer 3 · answered Mar 29 '11 at 22:01

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.

answered Mar 29 '11 at 22:01

Remixz

147
1
5

22

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

score 1 · Answer 4 · answered May 01 '14 at 19:00

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

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

4 Answers4

Linked

Related