Prevent Browser Adding Light-Blue Background to Input Elements on Second Visit

Question

When a form is filled out for a 2nd time and the browser recognises the details it adds a light-blue background to the form input elements on a site I'm building (which currently have the background set as transparent to show the dark blue background of the parent section). Image attached.

Is there a way to prevent this from happening?

It doesn't do it the first time of filling the form in, only if you input the details a second time after submission.

In the attached image I've left the fourth (bottom-right) field blank so you can see how it should look.

Thanks

Answer 1

I would try this:

input:-webkit-autofill {
        //The following works as the text color for the autofill 
        -webkit-text-fill-color: (the text color you want);
        //The following works as a background for the autofill 
        -webkit-box-shadow: 0 0 0px 1000px (here I would add the blue bg color you are using) inset; 

   }

Answer 2

1. You can just disable autocomplete in form at all or in some of input fields you want:

<form autocomplete="off">...</form>

or

<input type="text" autocomplete="off" />

2. Try to overwrite autofill by own CSS rules

@-webkit-keyframes autofill {
  to {
    color: inherit;
    background: transparent;
  }
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill
{
  -webkit-animation-name: autofill;
  -webkit-animation-fill-mode: both;
}