I am trying to provide a custom style for an HTML5 approved form. I was able to override the messages and customize the form, however I can not get rid of the red border around the invalid elements in IE11.
Chrome behaves the way I like, without any borders, however IE11 and Firefox show a red color around the field.
I tried adding the following:
input:required {...} input:valid {...} input:invalid {...}
But it failed - I could only add an additional border, and not cancel / delete the original one. I also see that they have a different mode of operation - the red frame, which I'm trying to get rid of applications, is applied in IE only after clicking the submit button. The form only starts with the lime border, when I just click the submit button and then a red border is added. Entering the correct data immediately removes both boundaries (this is in IE11). Firefox, on the other hand, starts with red and lime borders applied.
Full example: http://jsfiddle.net/zbyzhbdm/5/
Is there a way to remove the red frame / set it to a different color? I would really like to use my own HTML5 validation without resorting to my own script validation.
Update : Firefox can be persuaded to remove the border, followed by overriding:
input:invalid { box-shadow: none !important; }
(full details at http://jsfiddle.net/zbyzhbdm/7/ )
IE still go and find out.
source share