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.
Resetting the default handling of the :invalid pseduoclass in Firefox…
… and IE 10 for consistency across browsers.
Forgot to add the inline comments.
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