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.

Do not think you can override user agent styles especially that are marked with `!important` — Laazo, Jan 26 '17 at 10:42
try addressing the `input` with a class beforehand as well e.g. `input.class { background-color: red !important }` — Denis Tsoi, Mar 20 '17 at 08:24
@DenisTsoi any reason for addressing the `input` class beforehand? — roger, Mar 20 '17 at 19:47
I believed specificity would help, however using -webit-box-shadow solves this issue — Denis Tsoi, Mar 21 '17 at 01:23
depends :(, `opera` and `safari` won't lets you change the **auto-fill**. `firefox`, `ie` and `chrome` are alright. — roger, Mar 21 '17 at 03:00

score 26 · Answer 1 · answered Mar 09 '19 at 19:09

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

This is for me the best answer. Was trying to find a fix for Safari and none of the above answers were working. This one worked really good for me, thanks for saving me! <3 — Hairy Cat, Jun 18 '21 at 09:13

score 9 · Accepted Answer · edited May 23 '17 at 11:46

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"

thanks @Denis, that's really informative. I would turn the autocomplete off if I can, that will save me many hours of digging haha. — roger, Mar 21 '17 at 19:49

How to change Safari autofill yellow background color

2 Answers2