Material-ui: [TextField] Change -webkit-autofill style

[zhiqingchen]

should we disable -webkit-autofill style

ugly when i use the autofilll value

[akinnee]

I've had some people complain about this on the site I work on. Maybe there's a workaround, like making the element smaller so it looks more normal? Thoughts?

[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.

[shaurya947]

@zhiqingchen @danmartinez101 @akinnee this issue has been sitting for quite a while. If this functionality is still desired, would one of you like to submit a quick PR?

[andynoelker]

I am not sure why this is closed as this issue is still not resolved. Removing the style entirely is a workaround but not a solution. Could the TextField still have the same style if we shrunk the <input /> and add more styling to container elements?

[olslash]

Would also love to see a fix for this -- seems like anyone using the input fields for passwords is going to be affected right out of the gate (like I was)

[mattblackdev]

+1 looking for alternatives... anybody have one besides removing all styling?

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

[matheusjardimb]

This issue is still happening. Why did it got closed? @zhiqingchen

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

[nimahkh]

you can add this code to your index.css:

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

if i want to write css file , why using material-ui? the problem is about that how can we solve it in material-ui , not in css

[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!

[Emidomenge]

Here what I did and it works specifically for Mui 😄
````

myMuiClass: {
'& input:-webkit-autofill': {
'-webkit-box-shadow': '0 0 0 30px red inset !important'
},
'& input:-webkit-autofill:hover': {
'-webkit-box-shadow': '0 0 0 30px red inset !important'
},
'& input:-webkit-autofill:focus': {
'-webkit-box-shadow': '0 0 0 30px red inset !important'
},
'& input:-webkit-autofill:active': {
'-webkit-box-shadow': '0 0 0 30px red inset !important'
}
}
````
Enjoy 🚀