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.

Does this answer your question? [Remove the yellow background on input on autofill](https://stackoverflow.com/questions/29120333/remove-the-yellow-background-on-input-on-autofill) — Heretic Monkey, Apr 09 '20 at 21:04

focus.style · Accepted Answer · 2020-06-15T14:32:59.640

2

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>

edited Jun 15 '20 at 14:32

answered Apr 09 '20 at 20:48

focus.style

6,612
4
26
38

Either way it doesn;t work in Mozilla, just on Chrome. – BR4TO92 Apr 09 '20 at 20:58
Ho i see. It's autocomplete color of the Firefox. Add some code for you. – focus.style Apr 09 '20 at 21:07
It doesn't solve the issue using the Mozilla specific tags but it's also not a problem anymore, since it's just autocomplete and without it it works as expected. – BR4TO92 Apr 09 '20 at 21:32

Stanley · Answer 2 · 2020-04-09T21:33:19.597

0

UPDATE

the code listed bellow is not necessary as mentioned in the comments. however refreshing cache helped as the problem came of autocomplete.

OLD

Use background-color: white; and not 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;
  }

edited Apr 09 '20 at 21:33

answered Apr 09 '20 at 20:46

Stanley

2,434
18
28

Apparently doesn't work in Mozilla FIrefox, only on Chrome. It must be some special property to this browser. – BR4TO92 Apr 09 '20 at 20:52
@BR4TO92 have you reset the cache? – Stanley Apr 09 '20 at 20:56
Yes, this was the issue. I opened the page in private mode and now the background is white. Edit your answer so I can approve it. Thanks! – BR4TO92 Apr 09 '20 at 21:05
It doesn't matter. `background: white` is just shorthand for `background-color: white`. – Heretic Monkey Apr 09 '20 at 21:05
@BR4TO92 That's a red herring. Private mode turns off autofill. – Heretic Monkey Apr 09 '20 at 21:07
Actually the autocomplete is the actual answer. – BR4TO92 Apr 09 '20 at 21:30
@BR4TO92 aaah, hahah i see, that is a hard one to catch, i have updated once again – Stanley Apr 09 '20 at 21:33

Cannot set white background to HTML input in Mozilla

2 Answers2

UPDATE

OLD