html - 无法在 Mozilla 中为 HTML 输入设置白色背景

Question

一个奇怪的行为阻止我在 Mozilla Firefox 中为 HTML 输入元素的背景颜色(背景属性)设置白色(它切换到黄色)。其他颜色效果很好(黑色、绿色)。有人知道为什么吗？

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

在您的示例中，背景为纯白色。我认为，还有一些其他代码会影响您的输入。尝试使用 ID 使其更具体#用户名 .

或者，您可以使用 !important 规则。

更新

添加了第三种方式。它可能是 browther 的自动完成背景。试试下面的代码。

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>