Remove new Firefox autofill color

css firefox input autofill yellow
Ejdrien picture Ejdrien · Mar 18, 2019 · Viewed 7.4k times · Source

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.

Answer

Ejdrien picture Ejdrien · Mar 24, 2019

After few sleepless nights I've finally figured out how to get rid of the autofill colors!
It's really simple, all you have to do is to add this to your css: 

input {
  filter: none;
}

It's because 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%);
}

Which basically messes up your colors. I'm not sure if this is new in version 67.0b2 but it's nice to know it's there.
EDIT: This fix works for every Firefox browser with version 67.0 or higher.
EDIT 2: If you are looking for global fix for your Firefox, not just for your website you're creating, and you don't know how to add something to your Firefox's CSS then have a look here

Related questions

Hide Spinner in Input Number - Firefox 29

On Firefox 28, I'm using <input type="number"> works great because it brings up the numerical keyboard on input fields which should only contain numbers. In Firefox 29, using number inputs displays spin buttons at the right side of the …

Read More
Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Targeting only Firefox with CSS

Using conditional comments it is easy to target Internet Explorer with browser-specific CSS rules: <!--[if IE 6]> ...include IE6-specific stylesheet here... <![endif]--> Sometimes it is the Gecko engine (Firefox) that misbehaves. What would be …

Read More