How do I style the HTML form validation error messages with CSS?
4 Answers
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."
-
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
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
-
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
-
-
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
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
-
28This 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
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

- 2,013
- 4
- 35
- 69