Override User Agent Styling for Auto fill input fields

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.

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

Can I use :autofill? (currently 93.58% global support) shows that current versions of Chrome and Edge support it with the -webkit- prefix, but my testing proves that the prefix is not required.
If you want to include both for more browser support, 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>

I read my answer again and realized this would be a good case for the :is() pseudo-class because it accepts a forgiving selector list.
When using :is(), instead of the whole list of selectors being deemed invalid if one fails to parse, the incorrect or unsupported selector will be ignored and the others used.
Can I use :is(): Support for forgiving selector list? currently shows 90.76% global support.

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

input:is(:-webkit-autofill, :autofill) {
  outline: 3px solid orange;
}

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