Getting rid of default red border for required fields

1. Test Application for the current senario

Here is test application I created for your scenario: Plunker1

Below CSS class has been used to highlight the required input fields that failed validation:

    .submitted input:invalid {
        border: red 1px solid; }

Running this in IE 10 and Chrome 32 doesn't have the desired effect. The default :invalid CSS is applied to the invalid fields. It's not the one from user defined CSS. This rules out the possiblity that IE and Chrome are behaving differently in the scenario in subject.

2. Revelations from research on web

Following the example here, I created another test application here: Plunker2 This works fine in both IE 10 and Chrome 32.

Essentially we are removing default form validation on submit and adding custom validation that uses user defined CSS.

Changed HTML:

    <button formnovalidate="" type="submit">Submit</button>

JavaScript

    document.addEventListener("DOMContentLoaded", function() {
        document.forms[0].addEventListener('submit',function(e){
            e.preventDefault();
            e.currentTarget.classList.add('submitted');
        });
    });

Note: You can as well use window.onload instead of DOMContentLoaded event.

Hope this helps in resolving the issue you are facing.

This ugly appearance in IE is caused by the outline property. You can remove it with this:

input:required:invalid {
    outline: none;
}