styling form fields, issue with Chrome [duplicate] - html

Question

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 ?

Answer 1

Change "white" to any color you want.
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}

Answer 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;
}

Answer 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);
});
});
}

Answer 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.

Answer 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.)

Answer 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

Answer 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.

Answer 8

A little bit hacky but works perfectly for me
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}

Answer 9

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>

Answer 10

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);
}
});

Answer 11

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);
}

Answer 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.

Answer 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 */

Answer 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.

Answer 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;
}

Answer 16

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;
}

Answer 17

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);
});
}

Answer 18

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.

Answer 19

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

Answer 20

The only way that works for me was:(jQuery required)
$(document).ready(function(e) {
if ($.browser.webkit) {
$('#input_id').val(' ').val('');
}
});

Answer 21

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');

Answer 22

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);});

Answer 23

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">

Answer 24

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;
}

Answer 25

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.

Answer 26

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 ...

Answer 27

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);
}
});

Answer 28

<input type="text" name="foo" autocomplete="off" />
Similar Question: Link

Answer 29

Just found myself with the same question. This works for me:
form :focus {
outline: none;
}