Google Chrome form autofill and its yellow background
HtmlCssFormsGoogle ChromeAutofillHtml Problem Overview
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 ?
Html Solutions
Solution 1 - Html
Change "white" to any color you want.
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}
Solution 2 - Html
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;
}
Solution 3 - Html
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);
});
});
}
Solution 4 - Html
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.
Solution 5 - Html
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.)
Solution 6 - Html
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: https://stackoverflow.com/questions/2338102/override-browser-form-filling-and-input-highlighting-with-html-css
Solution 7 - Html
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.
Solution 8 - Html
A little bit hacky but works perfectly for me
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
Solution 9 - Html
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>
Solution 10 - Html
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);
}
});
Solution 11 - Html
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);
}
Solution 12 - Html
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.
Solution 13 - Html
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 */
Solution 14 - Html
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.
Solution 15 - Html
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;
}
Solution 16 - Html
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;
}
Solution 17 - Html
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);
});
}
Solution 18 - Html
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.
Solution 19 - Html
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:
- Put the password input ahead of the text input.
- 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
Solution 20 - Html
The only way that works for me was:(jQuery required)
$(document).ready(function(e) {
if ($.browser.webkit) {
$('#input_id').val(' ').val('');
}
});
Solution 21 - Html
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');
Solution 22 - Html
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);});
Solution 23 - Html
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">
Solution 24 - Html
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;
}
Solution 25 - Html
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.
Solution 26 - Html
The only solution that worked in my case:
:-webkit-autofill {
-webkit-text-fill-color: #000; /* ok for text, no hack */
transition-property: background-color; /* begin hack for background... */
transition-delay: 100000s; /* ...end hack for background */
}
This solution is not ideal, it is while waiting to find better ...
Solution 27 - Html
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);
}
});
Solution 28 - Html
<input type="text" name="foo" autocomplete="off" />
Similar Question: https://stackoverflow.com/questions/2530/how-do-you-disable-browser-autocomplete-on-web-form-field-input-tag">Link</a>
Solution 29 - Html
Just found myself with the same question. This works for me:
form :focus {
outline: none;
}