Невозможно установить белый фон для HTML ввода в Mozilla

Question

Странное поведение не позволяет мне установить белый цвет для HTML цвета фона элемента ввода (свойство background) в Mozilla Firefox (он переключается на желтый цвет). Другие цвета отлично работает (черный, зеленый). Кто-нибудь знает почему?

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid #A6A6A633;
  border-radius: 2px;
  opacity: 1;
  background: white;
  color: #9B9B9B;
}

<div class="form-group">
  <label for="username">User Name: </label>
  <input type="text" id="username" [(ngModel)]="username" placeholder="Enter User Name" name="username">
</div>

РЕДАКТИРОВАТЬ: Поскольку выяснилось, что проблема вызвана автозаполнением Mozilla, это больше не проблема, так как при обычном использовании он изменяет фон, как и ожидалось.

Answer 1

В вашем примере фон абсолютно белый. Я думаю, есть какой-то другой код, который влияет на ваш ввод. Попробуйте сделать его более точным c, используя идентификатор # username .

Или, вы можете использовать! Важное правило.

ОБНОВЛЕНО

Добавлен третий способ. Это может быть автозаполнение фона браузера. Попробуйте код ниже.

input#username {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 1px solid #A6A6A633;
border-radius: 2px;
opacity: 1;
background: #fff !important;
    color: #9B9B9B;
    
  }
input#username:-moz-autofill, input#username:-moz-autofill-preview, input#username:-webkit-autofill {
  filter: none;
  background: #fff !important;
}

<div class="form-group">
              <label for="username">User Name: </label>
              <input type="text" id="username" [(ngModel)]="username" placeholder="Enter User Name"
                     name="username">
            </div>

Answer 2

ОБНОВЛЕНИЕ

приведенный ниже код не обязателен, как указано в комментариях. однако обновление кеша помогло, так как возникла проблема с автозаполнением.

OLD

Используйте background-color: white;, а не Background: white;

    input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 1px solid #A6A6A633;
border-radius: 2px;
opacity: 1;
background-color: white;
    color: #9B9B9B;
  }