Override User Agent Styling for Auto fill input fields

Question

How do i Override the default browser styling (light blue background) on input fields , I am doing the front end on angular ,

<input matInput formControlName="username" type="text" #userInput
        (cdkAutofill)="usernameAutofilled = $event.isAutofilled" [placeholder]="(usernameAutofilled || usernameFocused) ? '' : 'Username'" (blur)="onBlur($event,'username',authForm)" autocomplete="off" (focus)="usernameFocused =true" (keyup)="onKeyup('username')" /> 

i tried to override styling with webkit-autofill css property but that does not work.

Answer 1

"The :autofill CSS pseudo-class matches when an <input> element has its value autofilled by the browser."

Can I use :autofill? shows that current versions of Chrome and Edge support it with the -webkit- prefix, but my testing proves that the prefix is not required. Nonetheless, two rulesets should be used instead of input:-webkit-autofill, input:autofill {} because a browser will ignore the entire rule if one of the comma-separated selectors is unsupported.

label {
  display: block;
  margin-top: 1em;
}

input:-webkit-autofill {
  outline: 3px solid firebrick;
}

input:autofill {
  outline: 3px solid firebrick;
}

<form>
  <label for="name">Name</label>
  <input name="name" type="text" autocomplete="name">

  <label for="email">Email Address</label>
  <input name="email" type="email" autocomplete="email">

  <label for="country">Country</label>
  <input name="country" type="text" autocomplete="country-name">
</form>