Normalizing the default handling of the :invalid pseudoclass #124

wants to merge 2 commits into


None yet

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.

necolas commented Dec 2, 2012

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 Dec 2, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment