27

A few days ago my Firefox Developer Edition updated to version 67.0b2 (64 bit). Since then all autofilled input fields have a yellow background, on literally every website.

How can I get rid of the yellow autofill color?

Changing inset box-shadow color doesn't seem to work like it does in Chrome.

DreamTeK
  • 32,537
  • 27
  • 112
  • 171
Ejdrien
  • 2,782
  • 1
  • 17
  • 32

3 Answers3

75

Firefox 94 and newer

Just change the input's background color in your css:

input:autofill {
  background: #fff; /* or any other */
}

If you wish to remove the autofill background only in your Firefox browser, set layout.css.autofill.background to false in about:config.

Firefox 67 (2019-05-21) - 94 (2021-11-02; excluding)

Add this to your css:

input {
  filter: none;
}

Why? At the bottom of view-source:resource://gre-resources/forms.css we can see this:

:-moz-autofill, :-moz-autofill-preview {
  filter: grayscale(21%) brightness(88%) contrast(161%) invert(10%) sepia(40%) saturate(206%);
}

And that is the cause of the yellow autofill background color.

Ejdrien
  • 2,782
  • 1
  • 17
  • 32
1

This works for me using Firefox 99.

box-shadow: 0 0 0 40px {COLOR} inset !important;

unfortunately you can't change the color to transparent, it'll still be yellow.

Jakub Kurdziel
  • 3,216
  • 2
  • 12
  • 22
timmy ha
  • 21
  • 3
0

For firefox 94.0+

To make it work, additionally, I had to change this option to false in about:config:

layout.css.autofill.background = false
tdy
  • 36,675
  • 19
  • 86
  • 83
hanspr
  • 9
  • 1
  • 3
    Any way to make it work without asking users to change their browser's settings? – Will Nov 03 '21 at 22:18
  • I don't know, I would ask firefox team about that, or rise a bug report in their bugzilla site. – hanspr Nov 04 '21 at 23:22