Невозможно увидеть введенный текст в поле ввода в браузере IE11

Question

Я использую понятный интерфейс для создания веб-сайта. Я добавил некоторые дополнительные отступы поверх поля ввода. Кажется, это работает во всех браузерах, кроме IE11, где я не могу увидеть введенный текст. Какие изменения необходимо внести, чтобы текст появился в поле ввода?

Вот ссылка на стек, чтобы получить доступ к коду

https://stackblitz.com/edit/clarity-forms-test-ea75jb?file=src%2Fapp%2Fapp.component.css

<div class="clr-control-container">
            <div class="clr-input-wrapper">
              <input type="text" id="example" placeholder="Example Input" class="clr-input">
            </div>
 </div>

1010 * Styles *

input[type] {
   background-color: grey;
    padding: 21px 6px; //Adding padding is the reason causing the issue
   color:white;
    width: 100%;
    margin-top: 5px;
  }

Есть ли обходной путь для этой проблемы?

Answer 1

Я пытаюсь проверить код с помощью инструментов разработчика и обнаружил, что _ngcontent-c0 вызывает эту проблему.

Если вы удалите его из кода, вы сможете увидеть тест в текстовом поле в IE.