title: Css input error styling not displaying correctly in Edge browser
body: <p>When leaving the fields empty (for testing) and clicking the save button, the input fields should be underlined red with the "Required" text below. I've tested this in IE11, Edge, Chrome and Firefox. It's working as intended except for the Edge browser. </p>
  
  <p>If Test2 field get focus and then you click/tab out, the red underline will show. I've found Test1 is only displayed correctly because the field is focused by jQuery validation. If I had more fields (Test3, Test4, etc.) they would also not be displayed correctly.</p>
  
  <p>Any assistance in figuring out how to get this working in Edge would be greatly appreciated.</p>
  
  <p><a href="https://jsfiddle.net/9geqo5rm/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <pre><code>&lt;form id="frmTest"&gt;
    &lt;div class="md-input-group"&gt;
      &lt;input type="text" name="Test" required&gt;
      &lt;span class="bar"&gt;&lt;/span&gt;
      &lt;div class="flex-row helper-row"&gt;
        &lt;span class="errorMsg"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;label class="fontL"&gt;Test1 Field&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="md-input-group"&gt;
      &lt;input type="text" name="Test2" required&gt;
      &lt;span class="bar"&gt;&lt;/span&gt;
      &lt;div class="flex-row helper-row"&gt;
        &lt;span class="errorMsg"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;label class="fontL"&gt;Test2 Field&lt;/label&gt;
    &lt;/div&gt;
    &lt;button type="submit" name="btnSave" id="btnSave"&gt;Save&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.md-input-group {
      position: relative;
      margin-bottom: 20px;
  }
  
  .md-input-group input {
      display: block;
      width: 100%;
      height: 30px;
      min-height: 30px;
      padding: 4px 10px 8px 0;
      background: inherit;
      border: none;
      border-bottom: 1px solid rgba(0, 0, 0, 0.38);
      color: rgba(0, 0, 0, 0.87);
      outline: none;
  }
  
  .md-input-group input:hover {
      color: rgba(0, 0, 0, 0.54);
  }
  
  /* LABEL ======================================= */
  .md-input-group &gt; label {
      position: absolute;
      top: 4px;
      left: 0px;
      height: 18px;
      color: rgba(0, 0, 0, 0.38);
      font-size: 0.938em;
      pointer-events: none;
      -webkit-transition: 0.2s ease all;
         -moz-transition: 0.2s ease all;
              transition: 0.2s ease all;
  }
  
  /* LABEL ACTIVE STATE ================================= */
  .md-input-group input:focus ~ label, 
  .md-input-group input:valid ~ label,
  .md-input-group input.error:focus ~ label {
      top: -16px;
      font-size: 0.813em;
      color: rgba(33, 150, 243, 1);
  }
  
  /* BOTTOM BARS ================================= */
  .md-input-group .bar {
      position: relative;
      display: block;
      width: 100%;
  }
  
  .md-input-group .bar::before,
  .md-input-group .bar::after {
      content: '';
      position: absolute;
      bottom: 0;
      width: 0;
      height: 2px;
      background: rgba(33, 150, 243, 1);
      -webkit-transition: 0.2s ease all;
         -moz-transition: 0.2s ease all;
              transition: 0.2s ease all;
  }
  
    .md-input-group .bar::before {
        left: 50%;
    }
  
    .md-input-group .bar::after {
        right: 50%;
    }
  
  /* BOTTOM BAR ACTIVE STATE ================================= */
  .md-input-group input:focus ~ .bar::before,
  .md-input-group input:focus ~ .bar::after,
  .md-input-group input.error ~ .bar::before,
  .md-input-group input.error ~ .bar::after {
      width: 50%;
  }
  
  .md-input-group .helper-row {
      justify-content: flex-end;
      min-height: 25px;
  }
  
  /* ERROR STATE ================================= */
  .md-input-group input.error ~ .bar::before,
  .md-input-group input.error ~ .bar::after {
      background: rgba(255, 0, 0, 1);
  }
  
  .md-input-group input.error ~ .helper-row span.errorMsg {
      flex: 1;
      display: block;
      margin: 4px 0;
  }
  
  .md-input-group span.errorMsg label {
      color: rgba(255, 0, 0, 1);
  }
  </code></pre>
  
  <p>jQuery Validate:</p>
  
  <pre><code>$('#frmTest').validate({
          rules: {
              Test: {
                  required: true,
                  maxlength: 10
              },
              Test2: {
                  required: true,
                  maxlength: 10
              }
          },
          messages: {
              Test: {
                  required: "Required",
                  maxlength: "Required (max 10 characters)"
              },
              Test2: {
                  required: "Required",
                  maxlength: "Required (max 10 characters)"
              }
          },
          submitHandler: function (form) {
              $('#btnSave').prop('disabled', true);
              //form.submit();
          },
          highlight: function (element) {
              $(element).addClass('error');
          },
          unhighlight: function (element) {
              $(element).removeClass('error');
          },
          errorPlacement: function (error, element) {
              error.appendTo(element.closest('.md-input-group').find('span.errorMsg'));
          }
      });
  </code></pre>