Cannot set white background to HTML input in Mozilla

Question

A strange behavior prevents me from setting white color for an HTML input element's background color (background property) in Mozilla Firefox (it switches to a yellow color). Other colors works fine (black, green). Does anybody know why?

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>

EDIT: Since it turned out the problem is caused by Mozilla's autocomplete, it's not a problem anymore since in normal use it changes the background as expected.

Answer 1

In your example the background in perfectly white. I think, there is some other code, that affects your input. Try to make it more specific using the ID #username.

Or, you can use !important rule.

UPDATED

Added the third way. It may be an autocomplete background of browther. Try the code below.

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>