Css输入错误样式在Edge浏览器中无法正确显示

Question

[将字段留空（用于测试）并单击保存按钮时，输入字段应在红色下划线标有以下“必填”文本。我已经在IE11，Edge，Chrome和Firefox中进行了测试。除Edge浏览器外，它均按预期工作。

如果Test2字段获得焦点，然后单击/跳出，则会显示红色下划线。我发现Test1仅正确显示，因为该字段由jQuery验证集中。如果我还有更多字段（Test3，Test4等），它们也将无法正确显示。

非常感谢您提供任何帮助，以弄清如何使其在Edge中正常工作。

JSFiddle

<form id="frmTest">
  <div class="md-input-group">
    <input type="text" name="Test" required>
    <span class="bar"></span>
    <div class="flex-row helper-row">
      <span class="errorMsg"></span>
    </div>
    <label class="fontL">Test1 Field</label>
  </div>
  <div class="md-input-group">
    <input type="text" name="Test2" required>
    <span class="bar"></span>
    <div class="flex-row helper-row">
      <span class="errorMsg"></span>
    </div>
    <label class="fontL">Test2 Field</label>
  </div>
  <button type="submit" name="btnSave" id="btnSave">Save</button>
</form>

CSS：

.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 > 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);
}

jQuery验证：

$('#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'));
        }
    });

Answer 1

似乎是由于Edge中伪类的不同行为。可能是不同浏览器中使用的不同CSS引擎导致了此问题。

您可以更改以下代码：

/* ERROR STATE ================================= */
.md-input-group input.error ~ .bar::before,
.md-input-group input.error ~ .bar::after {
    background: rgba(255, 0, 0, 1);
}

进入：

/* ERROR STATE ================================= */
.md-input-group input.error ~ .bar::before,
.md-input-group input.error ~ .bar {
    background: rgba(255, 0, 0, 1);
}

.md-input-group input.error ~ .bar::after,
.md-input-group input.error ~ .bar {
    background: rgba(255, 0, 0, 1);
}

然后它将在Edge中运行。