Removing the default red border for required fields

Question

I have some required fields on the form. For required fields, I want a 1px red border to highlight the form fields after the submit form. Chrome does it perfectly. IE gives problems with default and wide borders. How to get rid of them?

Download Source Package html:

<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 by 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 by 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> 

A similar scenario can be seen here: http://jsfiddle.net/trixta/qTV3g/

Answer 1

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

 input:required:invalid { outline: none; } 

Answer 2

1. Test application for the current senario

Here is the test application I created for your scenario: Plunker1

Below, the CSS class is used to highlight the required input fields that did not pass the test:

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

Running this in IE 10 and Chrome 32 does not have the desired effect. Default value: Invalid CSS is applied to invalid fields. This is not the one defined by the CSS user. This eliminates the possibility that IE and Chrome behave differently in the object script.

2. Revelations from Internet research

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

Essentially, we remove the default form validation for submission and add a custom validation that uses user-defined CSS.

HTML changed:

 <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 also use window.onload instead of the DOMContentLoaded event.

We hope that this helps in solving the problem that you are facing.

Answer 3

try

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