How to avoid "-internal-autofill-selected" style to be applied?

Question

I have a login form with 2 fields, username and password. Username field is autocompleted by chrome. When I submit the form (when it is valid), this style is applied mysteriously:

input:-internal-autofill-selected {s ñ
    background-color: rgb(232, 240, 254) !important;
    background-image: none !important;
    color: -internal-light-dark-color(black, white) !important;
}

Is there a way to avoid that? The form is submitted using Ajax, so it is a little ugly if for Username field that style is applied, but for Password field it is not.

I noticed that this happen only if field is filled with an element in the chrome sugggestions list. If field is filled with a value that is not in the list, the style is not applied.

Regards Jaime

Gombroon

Answer 1

To get rid of the undesired behavior, this trick "just works" (tm):

  input:-webkit-autofill,
  input:-webkit-autofill:focus {
    transition: background-color 0s 600000s, color 0s 600000s !important;
  }

EDIT: As @Spock mentioned in a comment, you may want to increase specificity of this styling in case there's a competing setting coming from another library. Thus, adding !important to the snippet above to make sure it works as-is for a wider audience.

Champignon

I'm wondering though, why it's not working setting bg color & color to "unset"? – Windowshop

will someone please blog about... whyyyyiiieee? caveats? Will a chrome update obliterate this one day? Why do y'all happily copy/paste and walk away? Laaaawd help us. – Lorianne

@RonGilchrist we are in the hands of Blink (the rendering engine behind Chrome) developers all the time, and this time is not any different. The solution above postpones any styles applied by Blink in our specific case by the period of 10000 minutes. It might stop working in the future, but I personally consider that highly unlikely. What is more likely is a proper (not stopgap) solution emerging at some point. – Champignon

Doesn't work in new versions of Chrome – Surrounding

@Surrounding I cannot confirm - it still works in my just-updated Chrome, no issues – Champignon

This answer allows the 'background-image: none !important;' style to be applied. The answer by @Florian Weber worked best for me as input fields that are valid/invalid with Bootstrap are updated with a background-image. – Neoplasty

you probably want to swap the large and zero numbers around: transition: background-color 0s 600000s, color 0s 600000s ; it's not the animation that should take 600'000 seconds, but the delay, developer.mozilla.org/en-US/docs/Web/CSS/transition. Also, you probably want to avoid for the animation engine to run and waste those cycles unnecessarily! – Myxoma

@LoftyLion thank you mate, I have made the edit. I somehow mismatched the values – Champignon

none of these answers are working what a dumbass design decision – Smoot

@Smoot it certainly is still working for me. Note though, it relates just to the built-in Chrome mechanics, and has nothing to do with 3rd-party extensions like LastPass etc - those extensions could do to the page absolutely whatever they want and I don't think a universal workaround is possible in that case. – Champignon

Amazing, finally something that worked! Thanks a bunch. – Kile

@Smoot I found that I also had old styling where I tried to set the color in other ways. Try to remove all styling code you have before, that tried to manipulate it. That did the trick for me. Also add !important to the rule – Kile

Answer 2

The answer is not intuitive. It's more a trick than anything else but it looks like it's the only one that works:

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px yellow inset;
}

This will style a yellow background to you input. It's basically a very opaque and overwhelming inner shadow. They use the same trick in the link @ravb79 sent.

Gomes

well, that killed a couple of my minutes from my life – Exserviceman

Answer 3

If you're ok with the default -internal-autofill-selected styling on a light theme and just want it to look nicer in a dark theme then you might just need:

input {
  color-scheme: dark;
}

Alga

There are some browsers that somehow don't support the other solutions, in that case this worked fine for me – Kasey

This is the BEST solution for "dark mode" IMO because it targets the browser's behavior instead of using a workaround with css animations. – Eley

FWIW, it looks like poop on Safari when information is autofilled, it doesn't respect the color-scheme. So you end up with a bright yellow field in an otherwise dark page. – Noon

Answer 4

I tried overwriting the style but for some reason it didn't work at all. Webkit or at least chrome just ignored that style.

When I added !important to the style webkit / chrome just flat-out removed it from the equation entirely. Nowhere to be seen in the element inspector.

Everything I tried got either ignored or removed.

Sooo, I came up with this horrible bullshit. But it works so far.

// Fix autocomplete shit
function fix_autocomplete_shit() {
    setTimeout(() => {
        if ($(this).is(':-internal-autofill-selected')) {
            var clone = $(this).clone(true, true);
            $(this).after(clone);
            $(this).remove();
        }
    }, 10);
}
$('.form-control').on('input', fix_autocomplete_shit);

I'm using bootstrap and I want to keep validation icons in form of background-images.

Only god knows why the webkit creators thought they absolutely have to set background-image to none but if they want war they can have it.

Hackett

Though this isn't my favourite answer, it is my favourite function name. Have +1 – Separator

Don't use jQuery. It's not 2006 anymore! ES6 has made jQuery irrelevant (by adopting much of it's syntax and structure). – Eley

Answer 5

You can add a box-shadow to remove the blue background

box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px rgba(255, 255, 255,1);

Astute

Answer 6

You could just add your own CSS so the updated state matches your regular input state. Adding an extra class to your declaration together with the !important attribute should override it.

So:

input.my-input {
    background-color: rgb(255, 255, 255) !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}

input.my-input:-internal-autofill-selected {
    background-color: rgb(255, 255, 255) !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}

I also found this btw: https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/

Tentage

Answer 7

I slightly tweaked @kostiantyn-ko's answer to only be applied to invalid inputs.

Sass:

input {
  &:is(:invalid, [aria-invalid=true]) {
    // your error styles
    background-color: var(--color-background-critical-subdued);
    border: 1px solid var(--color-border-critical-subdued);

    // hack needed to get rid of autofill styles only on invalid forms
    &:is(:-webkit-autofill, :-webkit-autofill:focus) {
      transition: background-color 600000s 0s, color 600000s 0s;
    }
  }
}

CSS:

/* your error styles */
input:is(:invalid, [aria-invalid=true]) {
  background-color: var(--color-background-critical-subdued);
  border: 1px solid var(--color-border-critical-subdued);
}

/* hack needed to get rid of autofill styles only on invalid forms */
input:is(:invalid, [aria-invalid=true]):is(:-webkit-autofill, :-webkit-autofill:focus) {
  transition: background-color 600000s 0s, color 600000s 0s;
}

Diu

Answer 8

This way should work (Remember to switch styles as needed):

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
    border: 1px solid rgba(255, 255, 255, 0.25);
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px rgb(232, 240, 254) inset;
    transition: background-color 5000s ease-in-out 0s;
}

Mcgrody

Answer 9

I tried many of the above-mentioned solutions, but nothing worked for me. But then stumbled upon a new input psudeo called :autofill

:root {
   --background-color: #000; // you can use any color, mine was #000
}

input:autofill {
    box-shadow: inset 0 0 0 100px var(--background-color);
}

Bikol

Answer 10

Incase anyone is still looking for a solution... This worked for me.

.inputDiv input.filled-input:-webkit-autofill,
 .inputDiv input.filled-input {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-box-shadow: inset 0 0 0 100px var(--filled-color);
    outline: var(--border) var(--secondary-color) !important;
}

Axiology

Answer 11

Depending on your case, this might help if you DONT need autofill at all:

add autocomplete="off" in input properties.

That did it for me :-)

Crine

Answer 12

i have done my own review here is the best solution i came up with.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid transparent !important;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

ideas from

https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/

Berner

Answer 13

So many answers to this on the net, this is the one that worked for me.

input {
    color-scheme: dark;
    background: rgb(42, 49, 63) !important;
}

/* also works for firefox! */
:-webkit-autofill,
:-webkit-autofill:hover,
:-webkit-autofill:focus {
    filter: none; /* u need this for firefox */
    -webkit-text-fill-color: white;
    -webkit-box-shadow: 0 0 0px 40rem rgb(42, 49, 63) inset;
}

Derisible

Answer 14

I have tried many methods but nothing works out, so followed the basic utilization on css.

 input:-webkit-autofill,
    input:-webkit-autofill{
      -webkit-box-shadow: 0 0 0px 1000px #475569 inset !important;
      -webkit-text-fill-color: #fff;
}

Preservative