'Remove new Firefox autofill color
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.
Solution 1:[1]
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.
Solution 2:[2]
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
Solution 3:[3]
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.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | tdy |
| Solution 3 | Jakub Kurdziel |