Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Normalizing the default handling of the :invalid pseudoclass #124

Closed
wants to merge 2 commits into from

4 participants

@tjvantoll

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 - http://jsfiddle.net/tj_vantoll/mSGs4/.

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.

@ericelliott

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.

@tchalvak

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

@necolas
Owner

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 authored
    … 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
View
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 */
+}
+
/* ==========================================================================
Tables
========================================================================== */
Something went wrong with that request. Please try again.