Google Chrome form autofill and its yellow backgro

问题:

I have design problem with Google Chrome and its form autofill function. If Chrome remembers some login/password it changes a background color to a yellow one.

Here are some screenshots:

How to remove that background or just disable this autofill ?

回答1:

Change \"white\" to any color you want.

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

回答2:

If you guys want transparent input fields you can use transition and transition delay.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 9999s;
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}

回答3:

Solution here:

if (navigator.userAgent.toLowerCase().indexOf(\"chrome\") >= 0) {
    $(window).load(function(){
        $(\'input:-webkit-autofill\').each(function(){
            var text = $(this).val();
            var name = $(this).attr(\'name\');
            $(this).after(this.outerHTML).remove();
            $(\'input[name=\' + name + \']\').val(text);
        });
    });
}

回答4:

In Firefox you can disable all autocomplete on a form by using the autocomplete=\"off/on\" attribute. Likewise individual items autocomplete can be set using the same attribute.

<form autocomplete=\"off\" method=\"..\" action=\"..\">  
<input type=\"text\" name=\"textboxname\" autocomplete=\"off\">

You can test this in Chrome as it should work.

回答5:

If you want to preserve the autofill, as well as any data, attached handlers and functionality attached to your input elements, try this script:

if (navigator.userAgent.toLowerCase().indexOf(\"chrome\") >= 0)
{
    var _interval = window.setInterval(function ()
    {
        var autofills = $(\'input:-webkit-autofill\');
        if (autofills.length > 0)
        {
            window.clearInterval(_interval); // stop polling
            autofills.each(function()
            {
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }
    }, 20);
}

It polls until it finds any autofill elements, clones them including data and events, then inserts them into the DOM in the same location and removes the original. It stops polling once it finds any to clone since the autofill sometimes takes a second after page load. This is a variation of a previous code sample, but more robust and keeps as much functionality intact as possible.

(Confirmed working in Chrome, Firefox and IE 8.)

回答6:

The following CSS removes the yellow background color and replaces it with a background color of your choosing. It doesn\'t disable auto-fill and it requires no jQuery or Javascript hacks.

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

Solution copied from: Override browser form-filling and input highlighting with HTML/CSS

回答7:

Worked for me, only the css change required.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important;
}

you can put any color in place of #ffffff.

回答8:

This fixes the problem on both Safari and Chrome

if(navigator.userAgent.toLowerCase().indexOf(\"chrome\") >= 0 || navigator.userAgent.toLowerCase().indexOf(\"safari\") >= 0){
window.setInterval(function(){
    $(\'input:-webkit-autofill\').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}

回答9:

A little bit hacky but works perfectly for me

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

回答10:

A combination of answers worked for me

<style>
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0px 1000px #373e4a inset !important;
           -webkit-text-fill-color: white !important;
   }
</style>

回答11:

Here\'s the MooTools version of Jason\'s. Fixes it in Safari too.

window.addEvent(\'domready\',function() { 
    $(\'username\').focus();

    if ((navigator.userAgent.toLowerCase().indexOf(\\\"chrome\\\") >= 0)||(navigator.userAgent.toLowerCase().indexOf(\\\"safari\\\") >= 0))
    {

        var _interval = window.setInterval(function ()
        {
            var autofills = $$(\'input:-webkit-autofill\');
            if (autofills.length > 0)
            {

                window.clearInterval(_interval); // stop polling
                autofills.each(function(el)
                {
                    var clone = el.clone(true,true).inject(el,\'after\');;
                    el.dispose();
                });
            }
        }, 20);                                               


    }
});

回答12:

This helped me, a CSS only version.

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }

where white can be any color you want.

回答13:

I use this,

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
/* You can use color:#color to change the color */

回答14:

In your tag, simply insert this small line of code.

autocomplete=\"off\"

However, do not place this in the username/email/idname field because if you are still looking to use autocomplete, it will disable it for this field. But I found a way around this, simply place the code in your password input tag because you never autocomplete passwords anyways. This fix should remove the color force, matinain autocomplete ability on your email/username field, and allows you to avoid bulky hacks like Jquery or javascript.

回答15:

If you want to get rid of it entirely, I\'ve adjusted the code in the previous answers so it works on hover, active and focus too:

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

回答16:

Here\'s a Mootools solution doing the same as Alessandro\'s - replaces each affected input with a new one.

if (Browser.chrome) {
    $$(\'input:-webkit-autofill\').each(function(item) {
        var text = item.value;
        var name = item.get(\'name\');
        var newEl = new Element(\'input\');
        newEl.set(\'name\', name);
        newEl.value = text;
        newEl.replaces(item);
    });
}

回答17:

What about that solution:

if ($.browser.webkit) {
    $(function() {
        var inputs = $(\'input:not(.auto-complete-on)\');

        inputs.attr(\'autocomplete\', \'off\');

        setTimeout(function() {
            inputs.attr(\'autocomplete\', \'on\');
        }, 100);
    });
}

It turns off the auto-complete and auto-fill (so yellow backgrounds disappear), waits 100 milliseconds an then turns the auto-complete functionality back without auto-fill.

If you have inputs that need to be auto-filled, then give them auto-complete-on css class.

回答18:

None of the solutions worked for me, the username and password inputs were still being populated and given the yellow background.

So I asked myself, \"How does Chrome determine what should be autofilled on a given page?\"

\"Does it look for input ids, input names? Form ids? Form action?\"

Through my experimentation with the username and the password inputs, there were only two ways I found that would cause Chrome to not be able to find the fields that should be autofilled:

1) Put the password input ahead of the text input. 2) Give them the same name and id ... or no name and id.

After the page loads, with javascript you can either change the order of the inputs on the page, or dynamically give them their name and id ...

And Chrome doesn\'t know what hit it ... autocomplete stays off.

Crazy hack, I know. But it\'s working for me.

Chrome 34.0.1847.116, OSX 10.7.5

回答19:

The only way that works for me was:(jQuery required)

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $(\'#input_id\').val(\' \').val(\'\');
    }
});

回答20:

I fixed this issue for a password field i have like this:

Set the input type to text instead of password

Remove the input text value with jQuery

Convert the input type to password with jQuery

<input type=\"text\" class=\"remove-autofill\">

$(\'.js-remove-autofill\').val(\'\');    
$(\'.js-remove-autofill\').attr(\'type\', \'password\');

回答21:

An update to Arjans solution. When trying to change the values it wouldnt let you. This works fine for me. When you focus on an input then it will go yellow. its close enough.

$(document).ready(function (){
    if(navigator.userAgent.toLowerCase().indexOf(\"chrome\") >= 0 || navigator.userAgent.toLowerCase().indexOf(\"safari\") >= 0){
        var id = window.setInterval(function(){
            $(\'input:-webkit-autofill\').each(function(){
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }, 20);

        $(\'input:-webkit-autofill\').focus(function(){window.clearInterval(id);});
    }
});

$(\'input:-webkit-autofill\').focus(function(){window.clearInterval(id);});

回答22:

Try this code:

 	$(function(){
   		setTimeout(function(){
   			$(\'[name=user_password]\').attr(\'type\', \'password\');
   		}, 1000);
   	});

<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js\"></script>
<input name=\"user_password\" type=\"password\">

回答23:

fareed namrouti answer is correct. But the background still get yellow when the input is selected. Adding !important fix the problem. If you want also textarea and select with the same behavior just add textarea:-webkit-autofill, select:-webkit-autofill

Only input

input:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

input, select, textarea

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

回答24:

Adding autocomplete=\"off\" is not gonna cut it.

Change input type attribute to type=\"search\".
Google doesn\'t apply auto-fill to inputs with a type of search.

Hope this saves you some time.

回答25:

If you want to avoid the yellow flicker until your css is applied slap a transition on that bad boy like so:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    transition: background-color 10s ease-in-out 0s;
}

回答26:

The final solution:

$(document).ready(function(){
    var contadorInterval = 0;
    if (navigator.userAgent.toLowerCase().indexOf(\"chrome\") >= 0)
    {
        var _interval = window.setInterval(function ()
        {
            var autofills = $(\'input:-webkit-autofill\');
            if (autofills.length > 0)
            {
                window.clearInterval(_interval); // stop polling
                autofills.each(function()
                {
                    var clone = $(this).clone(true, true);
                    $(this).after(clone).remove();
                    setTimeout(function(){
//                        $(\"#User\").val(\'\');
                        $(\"#Password\").val(\'\');
                    },10);
                });
            }
            contadorInterval++;
            if(contadorInterval > 50) window.clearInterval(_interval); // stop polling
        }, 20);
    }else{
        setTimeout(function(){
//            $(\"#User\").val(\'\');
            $(\"#Password\").val(\'\');
        },100);
    }
});

回答27:

<input type=\"text\" name=\"foo\" autocomplete=\"off\" />

Similar Question: Link

回答28:

Just found myself with the same question. This works for me:

form :focus {
  outline: none;
}