How to change Safari autofill yellow background color

Question

This image is what I get from safari:

While this is my code:

Sources:

How to Remove WebKit's Banana-Yellow Autofill Background

Remove forced yellow input background in Chrome - even it says chrome but still pointing to webkit-autofill

I had tried to use background-color:white !important; to override the locked css. Debug tool showed User Agent Stylesheet background-color had crossed out, but still the color didn't change and the custom was in used.

That's what really confused me, I have no idea why aren't allow to change the User Agent Stylesheet.

Answer 1

What I found out is that those solutions including -webkit-box-shadow and background-color work only in Google Chrome browser, but not in Safari. What works for me is adding background-clip: content-box. In the end, the code (working in all browsers) looks like:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 60px #fafafa inset !important;
    background-color: #fafafa !important;
    background-clip: content-box !important;
}