title: Getting rid of default red border for required fields
body: <p>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?</p>
  
  <p>HTML source code:</p>
  
  <pre><code>&lt;div class="tableRow"&gt;
      &lt;div class="tableCell fieldCaption borderBottom normalFontWeight"&gt;{{'_PHONE_'|i18n}}&lt;span class="mandetory"&gt;*&lt;/span&gt;&lt;/div&gt;
      &lt;div class="tableCell fieldValue borderBottom"&gt;
          &lt;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}}"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>input.submitted.ng-invalid {
      border: red 1px solid;
  }
  </code></pre>
  
  <p>Code served to IE 11:   </p>
  
  <pre><code>&lt;div class="tableRow"&gt;
      &lt;div class="tableCell fieldCaption borderBottom normalFontWeight ng-binding"&gt;Telefoon&lt;span class="mandetory"&gt;*&lt;/span&gt;&lt;/div&gt;
      &lt;div class="tableCell fieldValue borderBottom"&gt;
          &lt;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"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/krhkj.jpg" alt="enter image description here"></p>
  
  <p>Code served to Chrome (Version 35.0.1916.114 m):</p>
  
  <pre><code>&lt;div class="tableRow"&gt;
      &lt;div class="tableCell fieldCaption borderBottom normalFontWeight ng-binding"&gt;Phone&lt;span class="mandetory"&gt;*&lt;/span&gt;&lt;/div&gt;
      &lt;div class="tableCell fieldValue borderBottom"&gt;
          &lt;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"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/rmamF.jpg" alt="enter image description here"></p>
  
  <p>Similar kind of scenario can be seen here: <a href="http://jsfiddle.net/trixta/qTV3g/" rel="noreferrer">http://jsfiddle.net/trixta/qTV3g/</a></p>