CODEWITHSUNDEEP
javascripthtmlcsssafari
roger
roger

Reputation: 1263

How to change Safari autofill yellow background color

This image is what I get from safari:

This is what I get from Safari

While this is my code:

This is from my style sheet

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.

Upvotes: 10

Views: 15783

Answers (2)

Petr Tichý
Petr Tichý

Reputation: 279

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

Upvotes: 27

Denis Tsoi
Denis Tsoi

Reputation: 10414

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 (i.e. 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"

Upvotes: 10

Related Questions