CODEWITHSUNDEEP
angularangular-materialinput-field
Ghost
Ghost

Reputation: 407

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

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

empty input field

input field with option selected from autocomplete

filled 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?

Upvotes: 4

Views: 1477

Answers (1)

Victor Martinez Calvo
Victor Martinez Calvo

Reputation: 2435

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.

Upvotes: 5

Related Questions