The Heroku sign in screen with autocompleted inputs

Styling Autocompleted Inputs in Chrome and Safari

You know you hate it: that ugly yellow background color in Chrome and Safari’s autocompleted fields. This color is set in the user agent stylesheet, s0 unfortunately there’s no way to override it.

But there’s hope! I found a neat little trick in this Stack Overflow answer. Instead of styling the background color, use an inner box shadow that covers the background and use -webkit-text-fill-color to set the text color.

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

Now you can style these inputs however you want! However, the background color is yellow for a reason—it lets people know an input has been filled in by the browser. Instead of getting rid of it, consider choosing a different color that more closely matches your site’s design.