Ошибка метки плавающего ввода в IE11 (проблема с отображением заполнителя?)

Question

Вот полный исходный код формы входа, над которой я работаю: https://jsfiddle.net/7z8q4pyd/

Страница входа, над которой я работаю, будет отображать метку над вводом текста, как только какой-либо текст будет введен вполе ввода, это прекрасно работает во всех браузерах, но, похоже, оно не работает в IE11.

Я предполагаю, что это связано с проблемой совместимости IE с "показом заполнителя", в частности, с такими строками:

.form-label-group input:not(:placeholder-shown) {
  padding-top: calc(0.75rem + 0.75rem * 0.66);
  padding-bottom: calc(0.75rem / 3);
}

.form-label-group input:not(:placeholder-shown) ~ label {
  padding-top: calc(0.75rem / 3);
  padding-bottom: calc(0.75rem / 3);
  font-size: 12px;
  color: #777;
}

Я пытался изменить приведенный выше код на:

.form-label-group input:not(:focus) {
  padding-top: calc(0.75rem + 0.75rem * 0.66);
  padding-bottom: calc(0.75rem / 3);
}

.form-label-group input:not(:focus) ~ label {
  padding-top: calc(0.75rem / 3);
  padding-bottom: calc(0.75rem / 3);
  font-size: 12px;
  color: #777;
}

, который все еще не работает должным образом.Не совсем уверен, что еще можно сделать, чтобы заставить это работать на IE11.

Answer 1

IE11 и IE10 используют нестандартный :-ms-input-placeholder вместо стандартного :placeholder-shown псевдокласса. Кстати, MS Edge не поддерживает ни того, ни другого.

Вот связанный вопрос с кросс-браузерным решением.

Answer 2

В итоге проблема была «отображена местозаполнителем» в CSS.

Чтобы исправить ее, я использовал javascript для имитации функциональности CSS «показанной заглушкой»

Answer 3

Переменные CSS не поддерживаются IE11.Проверьте ссылку ниже для более конкретной поддержки браузеров для переменных CSS.

введите описание ссылки здесь

Итак, просто добавьте запасной вариант для "var", и он будет работать.