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.
We can use the -webkit-autofill pseudo-selector to target those fields and style them as we see fit. The default styling only affects the background color, but most other properties apply here, such as border and font-size .
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
.
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.
To make it work, additionally, I had to change this option to false
in about:config
:
layout.css.autofill.background = false
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With