[TextField] Change -webkit-autofill style

[zhiqingchen]

should we disable -webkit-autofill style

ugly when i use the autofilll value

[bjornreppen]

The information here can be applied to the library: http://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete

[akinnee]

I think removing it actually reduces user friendliness.

[mattblackdev]

I found this bit of a hack, using css transition to delay -webkit-autofill. Only tested in Chrome v56.0.2924.87

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
    transition-delay: background-color 5000s, color 5000s;
}

[mbrookes]

@matheusjardimb This isn't a Material-UI issue.

But, since you asked, LMGTFY:

https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
http://webagility.com/posts/remove-forced-yellow-input-background-in-chrome
https://blog.mariusschulz.com/2016/03/20/how-to-remove-webkits-banana-yellow-autofill-background

[gabrielfaro97]

you can add this code to your index.css:

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px #FFFFFF inset;
}

[edgarfinn]

@nimahkh Ive just come across the same issue, I wanted to be able to handle this within my Material-ui theme provider (although ideally it would be good for M-UI to maybe have a more elegant way of dealing with this), but the work-around I came to was adding the following to my MUI theme overrides:

overrides: {
  MuiOutlinedInput: {
    input: {
      '&:-webkit-autofill': {
        WebkitBoxShadow: '0 0 0 100px #266798 inset',
        WebkitTextFillColor: '#fff',
      },
    },
  },
}

using this pattern you should be able to apply the style rulings described in this CSS-tricks article.

Hope that helps!

[phoxer]

Mi solution was added it on the theme overrides.

overrides: {
   MuiOutlinedInput: {
     input: {
          '&:-webkit-autofill': {
            '-webkit-box-shadow': '0 0 0 100px #000 inset',
            '-webkit-text-fill-color': '#fff'
          }
        }
   }
}

[PabloLION]

In MUI v5, it is

createTheme({
// your other theme props ... 
// one less indent here for readability
components: {
  MuiOutlinedInput: {
    styleOverrides: {
      input: {
        "&:-webkit-autofill": {
          "-webkit-box-shadow": "0 0 0 100px var(--primary-weak) inset",
          "-webkit-text-fill-color": "var(--text-primary)",
        },
      },
    },
  },
},
})

Also, I used this to dynamically change the color. (learned this trick here)

<GlobalStyles
  styles={{
    ":root": {
      "--primary-weak": theme.palette.primary[theme.palette.mode as "dark" | "light"],
      "--text-primary": theme.palette.text.primary    },
  }}
/>

GlobalStyles Tag Doc

[f-a-t-h-e]

take a look at this code pen

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 9999s ease-in-out 0s;
}

[julianCast]

Another alternative to not apply any color to the autofill:

components: {
    MuiOutlinedInput: {
      styleOverrides: {
        input: {
          "&:-webkit-autofill": {
            backgroundClip: "text",
          },
        },
      },
    },
 }