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

Was reading that most browsers want to indicate autofill (with Safari being a bit more adamant with this indication).

I did find an alternative hack , where you use the -webkit-box-shadow to cover the background color. Upon inspection, trying to target the specific input with a class doesn't work (ie specificity).

In Safari, (10.0.2), the browser adds shadow content as the user agent, which includes the background-color and the value of the autofill. The issue here is that, the browser prohibits the the editing of those specific styles (such as background-color ), therefore the reason for the answer below.

input:-webkit-autofill, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px white inset;
  -webkit-text-fill-color: #333;
}

if you also have a border-bottom in the input

input:-webkit-autofill, input:-webkit-autofill:focus {
  border-bottom: 1px solid #333;
}

Source:
- medium-post
- stackoverflow discussion
- why-browsers ignore autocomplete="off"

Answer 2

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