Skip to content
This repository

Normalizing the default handling of the :invalid pseudoclass #124

wants to merge 2 commits into from

4 participants

TJ VanToll Eric Elliott Roy Ronalds Nicolas Gallagher
TJ VanToll

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.

Eric Elliott

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.

Roy Ronalds

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

Nicolas Gallagher

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

Nicolas Gallagher necolas closed this December 01, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 2 unique commits by 1 author.

Sep 09, 2012
TJ VanToll Resetting the default handling of the :invalid pseduoclass in Firefox…
… and IE 10 for consistency across browsers.
TJ VanToll Forgot to add the inline comments. 4df5d55
This page is out of date. Refresh to see the latest.

Showing 1 changed file with 9 additions and 0 deletions. Show diff stats Hide diff stats

  1. 9  normalize.css
9  normalize.css
@@ -361,6 +361,15 @@ textarea {
361 361
     vertical-align: top; /* 2 */
362 362
363 363
+ * 1. Removes default for Firefox.
+ * 2. Removes default for IE 10.
+ */
+:invalid {
+    box-shadow: none; /* 1 */
+    outline: none; /* 2 */
364 373
 /* ==========================================================================
365 374
366 375
    ========================================================================== */

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.