Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 253
Ejdrien Avatar asked Mar 18 '19 19:03

Ejdrien


People also ask

What is Webkit autofill?

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 .


Video Answer


2 Answers

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.

like image 103
Ejdrien Avatar answered Oct 16 '22 11:10

Ejdrien


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
like image 1
hanspr Avatar answered Oct 16 '22 12:10

hanspr