edge css兼容,CSS输入错误样式在Edge浏览器中无法正确显示

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

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

我们将不胜感激，希望能帮助您解决如何在Edge中进行此工作。

Test1 Field

Test2 Field

Save

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'));

}

});