Skip to content


Subversion checkout URL

You can clone with
Download ZIP


Normalizing the default handling of the :invalid pseudoclass #124

wants to merge 2 commits into from

4 participants


By default Firefox places a red box-shadow and IE 10 places a red outline around :invalid fields. You can see this by submitting this form in each browser -

WebKit and Presto do nothing with this behavior so the easiest way to get a consistent look is simply to simply reset the values.

I'm a bit torn about this because I do think that having the red outline / box-shadow makes for a more usable form, but I think having consistent behavior is more important.

Let me know what you think.


When I created the h5Validate jQuery plugin a few years ago, it was before any browser had implemented the spec. When the browsers started implementing and added their default behaviors, it was very jarring to see the default browser styles mixing very badly with most web designs.

Most web designers will want custom styling for error messages, and these defaults only get in the way.


I think reseting to nothing is this case is a bad approach.


In this case, I think it would be better to leave these evolving browser defaults alone and leave it up to site/app developers to deal with this as they see fit. I generally try to avoid interfering with styles if it can negatively impact accessibility and usability. Thanks

@necolas necolas closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Sep 9, 2012
  1. @tjvantoll

    Resetting the default handling of the :invalid pseduoclass in Firefox…

    tjvantoll committed
    … and IE 10 for consistency across browsers.
  2. @tjvantoll
This page is out of date. Refresh to see the latest.
Showing with 9 additions and 0 deletions.
  1. +9 −0 normalize.css
9 normalize.css
@@ -361,6 +361,15 @@ textarea {
vertical-align: top; /* 2 */
+ * 1. Removes default for Firefox.
+ * 2. Removes default for IE 10.
+ */
+:invalid {
+ box-shadow: none; /* 1 */
+ outline: none; /* 2 */
/* ==========================================================================
========================================================================== */
Something went wrong with that request. Please try again.