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

Question

将字段留空（用于测试）并单击保存按钮时，输入字段应带有红色下划线并带有下面的 "Required" 文本。我已经在 IE11、Edge、Chrome 和 Firefox 中对此进行了测试。除 Edge 浏览器外，它按预期工作。

如果 Test2 字段获得焦点然后您 click/tab 退出，将显示红色下划线。我发现 Test1 只能正确显示，因为该字段由 jQuery 验证聚焦。如果我有更多字段（Test3、Test4 等），它们也不会正确显示。

如果您能帮助我们解决如何在 Edge 中实现这一点，我们将不胜感激。

<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就可以了

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

Css input error styling not displaying correctly in Edge browser

css

jquery

jquery-validate

microsoft-edge