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

user_1048588 0
Viewed 33752

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

google-chrome css
6 Answers

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

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

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.

user_27714890

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

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);
user_148300930

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/

user_22274820

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.

user_159272360
Related