Google Chrome Autofill Styles Fix

Oct 27, 2015

Don’t take the title of this blog post the wrong way. I love Google Chrome’s autofill option. I enjoy being able to go to a site I’ve previously visited, and all I have to do is click the “Log In” button since my username and password are already filled in. My problem comes from a web development perspective. I’m the kind of developer that prefers to change input fields on my websites. With these changes comes a small, hard to figure out problem that I’ll explain, and then I’ll tell you how to prevent it in your apps.

When you sign into a web application using Google Chrome, there’s a message that comes sliding down the top of the page that says, “Do you want Google Chrome to save your password for this site?” Some of us have seen it, some of us haven’t. You then have the option of choosing “Never for this site”, “Save password” or X-ing the message away. As a user this is very useful, but as a developer this is where you need to be careful.

If a user was to pick the option “Save password”, you as a developer now have a new issue to deal with. The next time that same user comes to the login page, he or she will be greeted with inputs that don’t have all of your specified styles and instead have some pre-created Google Chrome styles. A gross looking yellow background, black text, and Chrome’s usual shadow border thingy is what will face the user. I assume this is not what you want. Well don’t fear, there’s a way around this.

The way to fix this issue is to first target the inputs that are being autofilled with the following CSS selector:

input:-webkit-autofill { }

Then there are a few properties you can add to get rid of the yellow background and to fix your font color if you want it to be anything other than black. I’ve created a Gist that has the code, and comments that explain how the code works and how to use it. In short, here's the code without comments:

input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px white inset;
	-webkit-text-fill-color: red !important;
}

[Go to Gist] to see the code with the comments.

Hopefully this post, along with the Gist, helps you prevent this difficult to diagnose issue or helps you fix it if you’re already being plagued by this.