Getting rid of default red border for required fie

问题:

I have some required fields in the form. For required fields I want 1px red border for highlighting form fields after form submit. Chrome is doing that perfectly. IE is giving troubles with default and broad borders. How to get rid of those?

HTML source code:

<div class="tableRow">
    <div class="tableCell fieldCaption borderBottom normalFontWeight">{{'_PHONE_'|i18n}}<span class="mandetory">*</span></div>
    <div class="tableCell fieldValue borderBottom">
        <input type="text" name="phoneValueInput" ng-class="{submitted:createCallBackForm.phoneValueInput.$invalid}" ng-model="taskDto.ContactPhoneNumber" placeholder="{{'_PHONE_NUMBER_'|i18n}}" required  validation-message="{{'_MSG_EMPTY_PHONE_NUMBER_'|i18n}}"/>
    </div>
</div>

CSS:

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

Code served to IE 11:

<div class="tableRow">
    <div class="tableCell fieldCaption borderBottom normalFontWeight ng-binding">Telefoon<span class="mandetory">*</span></div>
    <div class="tableCell fieldValue borderBottom">
        <input name="phoneValueInput" class="ng-isolate-scope ng-invalid ng-invalid-required ng-dirty" style="margin-left: 10px;" required="" type="text" placeholder="Telefoonnummer" ng-model="taskDto.ContactPhoneNumber" ng-class="{submitted:createCallBackForm.phoneValueInput.$invalid}" validation-message="Telefoonnummer kan niet leeg zijn">
    </div>
</div>

Code served to Chrome (Version 35.0.1916.114 m):

<div class="tableRow">
    <div class="tableCell fieldCaption borderBottom normalFontWeight ng-binding">Phone<span class="mandetory">*</span></div>
    <div class="tableCell fieldValue borderBottom">
        <input type="text" name="phoneValueInput" ng-class="{submitted:createCallBackForm.phoneValueInput.$invalid}" ng-model="taskDto.ContactPhoneNumber" placeholder="Phone Number" required="" validation-message="Phone number can not be empty" class="ng-isolate-scope ng-pristine ng-invalid ng-invalid-required">
    </div>
</div>

Similar kind of scenario can be seen here: http://jsfiddle.net/trixta/qTV3g/

回答1:

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

input:required:invalid {
    outline: none;
}

回答2:

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.

回答3:

try

input:required:invalid{
outline-color:red;
outline-width:thin;
}