Thu 4 Nov

Fixing the Chrome autocomplete background colour problem

A bit of an obscure one, this.

I work on a website where the login boxes have white text set against a dark brown background. Google Chrome’s autocomplete functionality overrides the background colour with a pale yellow, but it doesn’t change the foreground colour (see Issue 46543).

I did a bit of digging through the web inspector and found that Chrome uses -webkit-autofill to set background-color: #FAFFBD. Alas it uses !important so you can’t override it in your CSS, but you can work around the problem:

/*
    Fixes the autocomplete problem in Chrome: 
    Set the bg colour in case other webkit browsers 
    implement something similar, and set color to 
    something readable against #FAFFBD; 
*/
#login input:-webkit-autofill {
    background-color: #FAFFBD;
    color: #181818;
}

Sorted.