Overriding yellow autofill background

Question

After a long struggle, I've finally found the only way to clear autofill styling in every browser:

$('input').each(function() {
    var $this = $(this);
            
    $this.after($this.clone()).remove();
});

However, I can’t just run this in the window load event; autofill applies sometime after that. Right now I’m using a 100ms delay as a workaround:

// Kill autofill styles
$(window).on({
    load: function() {
        setTimeout(function() {
            $('.text').each(function() {
                var $this = $(this);
                
                $this.after($this.clone()).remove();
            });
        }, 100);
    }
});

and that seems safe on even the slowest of systems, but it’s really not elegant. Is there some kind of reliable event or check I can make to see if the autofill is complete, or a cross-browser way to fully override its styles?

Answer 1

If you're using Chrome or Safari, you can use the input:-webkit-autofill CSS selector to get the autofilled fields.

Example detection code:

setInterval(function() {
    var autofilled = document.querySelectorAll('input:-webkit-autofill');
    // do something with the elements...
}, 500);

Answer 2

There's a bug open over at http://code.google.com/p/chromium/issues/detail?id=46543#c22 relating to this, it looks like it might (should) eventually be possible to just write over the default styling with an !important selector, which would be the most elegant solution. The code would be something like:

input {
    background-color: #FFF !important;
}

For now though the bug is still open and it seems like your hackish solution is the only solution for Chrome, however a) the solution for Chrome doesn't need setTimeout and b) it seems like Firefox might respect the !important flag or some sort of CSS selector with high priority as described in Override browser form-filling and input highlighting with HTML/CSS. Does this help?

Answer 3

I propose you avoiding the autofill in first place, instead of trying to trick the browser

<form autocomplete="off">

More information: http://www.whatwg.org/specs/web-forms/current-work/#the-autocomplete

If you want to keep the autofill behaviour but change the styling, maybe you can do something like this (jQuery):

$(document).ready(function() { 
  $("input[type='text']").css('background-color', 'white');
});

Answer 4

$(window).load(function()
{
    if ($('input:-webkit-autofill'))
    {
        $('input:-webkit-autofill').each(function()
        {
            $(this).replaceWith($(this).clone(true,true));
        });
        // RE-INITIALIZE VARIABLES HERE IF YOU SET JQUERY OBJECT'S TO VAR FOR FASTER PROCESSING
    }
});

I noticed that the jQuery solution you posted does not copy attached events. The method I have posted works for jQuery 1.5+ and should be the preferred solution as it retains the attached events for each object. If you have a solution to loop through all initialized variables and re-initialize them then a full 100% working jQuery solution would be available, otherwise you have to re-initialize set variables as needed.

for example you do: var foo = $('#foo');

then you would have to call: foo=$('#foo');

because the original element was removed and a clone now exists in its place.