Неправильное отображение стиля ввода Css в браузере Edge - PullRequest
Новая
       45

Неправильное отображение стиля ввода Css в браузере Edge

0 голосов
/ 15 октября 2019

Если оставить поля пустыми (для тестирования) и нажать кнопку «Сохранить», поля ввода должны быть подчеркнуты красным с текстом «Обязательно» ниже. Я проверял это в 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'));
        }
    });

1 Ответ

0 голосов
/ 16 октября 2019

Кажется, из-за разного поведения псевдо-классов в 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.

...