Is there any way to change browser autocomplete visuals on angular material?

Question

I am having a problem with angular material when I try to select an option saved by the browser in an input field.

As you can see, there is a white rectangle around the text. Is there any way to remove it and make the text appear without it?

Answer 1

Please try the following.

 ::ng-deep input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: black;
}

input:-webkit-autofill is the selector you need to use to "override" the User Agent style applied automagically by "webkit".

However, seems to be "bugged" because it doesn't accept a background-color: transparent, so the trick I have been used is to create a transition this way.