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

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

Answer 1

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

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.

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

Answer 4

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

Answer 5

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.

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/

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