Remove default red border for HTML5 validation on FireFox/Internet Explorer 11

Question

I am trying to provide custom styling to HTML5-validated form. I was able to override the messages and tweak the form, however, I am unable to get rid of red border around invalid elements in IE11.

Chrome behaves as I like, without any borders, however IE11 and Firefox shows the red around the field.

I've tried adding following:

input:required {...}
input:valid    {...}
input:invalid  {...}

But was not successful - I could only add additional border, not override/remove the original one. I can also see that they have a different mode of operation - the red border I am trying to get rid of gets applied in IE only after I press the submit button. The form starts with the lime border only, when I just press submit, then also red border gets added. Putting right data in removes both borders instantly (this is in IE11). Firefox, on the other hand, starts with both red and lime borders applied.

Full example: http://jsfiddle.net/zbyzhbdm/5/

Is there any way to remove the red border / set it to different colour? I would really like to use the native HTML5 validation without resorting to my own validation script.

Update: Firefox can be persuaded to remove the border with following override:

input:invalid {
    box-shadow: none !important;
}

(full details at http://jsfiddle.net/zbyzhbdm/7/)

IE still to go and figure out.

Answer 1

Try the css property outline instead of border.