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 Validate：

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

然后它将在边缘中工作。