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

What browser are you using anyway? And how about posting a [reprex] so we can have a look at what's going on? — Rene van der Lende, May 26 '20 at 21:10
Where is your code, can you please update your code in this question so that we can work on your problem. — Dupinder Singh, May 31 '20 at 05:07

score 1 · Answer 1 · answered May 26 '20 at 00:20

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; 

   }

score 1 · Answer 2 · answered Jun 01 '20 at 15:07

Why not just override the box-shadow of the input autofill property as shown in this other SO thread like this:

    input:-webkit-autofill {
        -webkit-box-shadow:0 0 0 50px white inset;
    }

    input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 50px white inset;
    }

I tried it on a dummy html form just now and the above (even without the text-fill-color property defined) seems to work fine in removing the blue background.

score 0 · Answer 3 · answered Jun 01 '20 at 09:13

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;
}

score -1 · Answer 4 · answered Oct 14 '19 at 00:14

-1

You can use the pseudo selector :focus on your input like this to remove the blue outline input:focus { outline: none; }

answered Oct 14 '19 at 00:14

coding4you

9
1
3

This isn't what I want. It's the light-blue background colour on the input elements I want to remove. Also you should never have `outline:none` on your focus property on forms - it creates accessibility issues. You should always have `outline: transparent`. – pjk_ok Oct 14 '19 at 12:43

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

4 Answers4