Google Chrome form autofill and its yellow background

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:

alt text

How to remove that background or just disable this autofill ?

For styling, this colour can seriously with design elements, like the outlining in input tags in Chrome also, I would more like to change the colour than turn it off. — Kyle, May 27 '10 at 11:02
Google seems to acknowledge this issue to some degree. See http://code.google.com/p/chromium/issues/detail?id=46543 — MitMaro, Nov 12 '10 at 04:49
@ANeves Well this is a major issue when you have an heavy design site where you use background or sprite methods to show the user what's is the desire value in a specify field. So if chrome override this background-image whith their background-color, Users wont see what you want to show them. — ncubica, Mar 05 '12 at 05:11
ANeves - the reason I need to disable autofill is because the user will be a manager who will use this page to add other users to the system, so the last thing he wants is for it to autofill the manager's username and password. Also I'm finding that the Password box gets coloured, but the Retype Password box does not. — Peter Smartt, Aug 13 '13 at 00:53
@ANeeves A concrete example of why I'm doing this (and why I'm here) is that the Chrome automatic styling when auto filling makes a background image disappear on the username / password input. When not auto filling, there is a User & Password icon inside each input. Not so 'beyond comprehension' :) — p e p, Apr 01 '14 at 19:52
Rather than disabling the yellow background, just **don't use images** for your forms and it will look much better than that: http://i.imgur.com/DemnvGy.png — fregante, Nov 17 '14 at 09:08
To disable autocomplete you can add **autocomplete="off"** to your input element, e.g. — joe_young, Dec 14 '14 at 13:44
Just an additional info: I was bitten by this when I have a password field. I got my fields highlighted automatically (yellow) and filled with strange value. And I found the solution here: http://www.zigpress.com/2014/11/22/stop-chrome-messing-forms/ ... The solution is in the section that says "Disable Google Chrome Autofill" ... add hidden fields. — Cokorda Raka, Jul 21 '15 at 18:58
Please check my workaround here: http://stackoverflow.com/questions/15738259/disabling-chrome-autofill/36030236#36030236 — Fareed Alnamrouti, Mar 16 '16 at 08:28
@hsz Please reconsider changing the marked answer, mine no longer applies and another answer is a far better solution. — Kyle, Jul 06 '16 at 07:19

score 283 · Accepted Answer · edited Apr 26 '16 at 09:14

283

Change "white" to any color you want.

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

edited Apr 26 '16 at 09:14

Community

1
1

answered Jan 07 '13 at 23:37

Fareed Alnamrouti

26,439
4
77
71

4

great idea. I wouldl stick with 50 or 100 whenever sufficent (regular size input boxes) to avoid potential performance hits on weaker devices. (And no need for px after 0) – Frank Nocke Jan 02 '14 at 12:12
4

Love this hack! Great thinking... Everyone is removing autofill. I wanted to keep autofill on just get ride of the ugly yellow. – Travis Jan 10 '14 at 19:15
1

Doesn't work if you have background images behind your input field just fill the whole area with white. I tried all the solutions on this page, including the jquery based ones and they didnt work for me, in the end i had to add autocomplete="off" to the field. – Myke Black Mar 28 '14 at 15:05
A good CSS-only compromise I guess. Please star the reported issue to encourage google devs to fix it https://code.google.com/p/chromium/issues/detail?id=46543 – Adrien Be May 27 '14 at 08:11
Weird, this fixes the color...but now causes Chrome to auto-fill the username/password fields. No Google, I'm not logging in with my "create new user" form... – Cerin May 28 '14 at 20:05
19

To also style the text color use `-webkit-text-fill-color` - see [this question](http://stackoverflow.com/questions/22631943/change-font-color-of-autofill-input-field) – Erwin Wessels Jul 08 '14 at 05:04
this removes the other jquery validations and CSS from the textbox :( – Nivedita Aug 09 '14 at 14:11
1

If you want to retain the original shadow using Bootstrap, you can use: `-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), inset 0 0 0 50px white;` – Aug 18 '14 at 22:03
nice hack! none of other solutions worked for me. i use this box shadow(nee less process): `-webkit-box-shadow: inset 0 100px 0 white;` – Ali Gonabadi Aug 28 '14 at 12:19
This worked but I had to set the input:-webkit-autofill:focus class too. – C.M. Dec 28 '15 at 22:07
2

there is error, i dont maybe syntax changed but this works now: `box-shadow: inset 0 0 0 1000px white !important;` – Muhammad Umer Apr 01 '16 at 02:08
1

this is not a good solution because it also hides background images. – Mulgard May 21 '16 at 08:50
1

Yes good hack but unfortunately not working for transparent fields with background images... – Tino Jul 21 '16 at 13:24
1

what if i need the color to be transparent? – George Carlin Sep 23 '17 at 06:23
Does not play well if the field has multiple shadows applied. I have another inset shadow to get the effect of the field being cut out of my page, and in combination with this, the left and right side (with border radius) still becomes yellow. To test: Use a darker color than 'white'. – Streching my competence Jan 29 '19 at 17:10
Good solution xD – Juan Feb 08 '19 at 17:43

score 51 · Answer 2 · edited Mar 03 '16 at 11:30

51

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

edited Mar 03 '16 at 11:30

sigra

224
1
9

answered Sep 10 '15 at 15:37

Gísli Freyr Svavarsson

1,586
1
14
12

Best solution for me as RGBA color values did not work in `-webkit-box-shadow`. Also eliminates the need to give color values for this declaration: the default values will still apply. – Sébastien Oct 13 '16 at 10:26
even better is to use the transition delay instead of its duration, to not have color mixing at all – antoine129 Sep 25 '17 at 14:52
good but for some reason I had to move this rule at the end of the file, otherwise didn't worked – Igor Mizak Dec 14 '17 at 00:50
That what I looked for! Thank you! – Akhmedzianov Danilian Oct 27 '18 at 03:40

score 43 · Answer 3 · edited Jan 08 '13 at 08:31

43

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

edited Jan 08 '13 at 08:31

hsz

136,835
55
236
297

answered Nov 16 '10 at 16:33

Alessandro Benedetti

447
4
2

This did work whereas the top answer did not. However I think I will not try to change the behavior since a). this is javascript so there is a second between it works and it doesn't (until the js loads) and b). it may confuse the chrome user who is used to the default behavior. – Jun 19 '13 at 03:07
3

My chrome just reapplies the yellow to the new input :( – Dustin Silk Apr 30 '15 at 09:39
Please don't. This will not work with any JS framework, only for static websites. – Akhmedzianov Danilian Oct 27 '18 at 03:41

score 26 · Answer 4 · answered May 27 '10 at 10:44

26

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.

answered May 27 '10 at 10:44

Kinlan

15,514
5
49
86

7

Turning `autocomplete="off"` is not accessible these days. – João Apr 04 '12 at 10:00
4

Unfortunately, this solution no longer works in Chrome. – henrywright Aug 07 '14 at 18:51
2

This is highly disrecommended as you're not really solving the actual problem here. instead, you're creating a new one by frustrating users because they have to manually type their (presumably) login details (if they even remember what they were) – xorinzor Jan 13 '17 at 12:46

score 25 · Answer 5 · edited Jan 08 '13 at 08:30

25

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

edited Jan 08 '13 at 08:30

hsz

136,835
55
236
297

answered Jul 13 '11 at 14:14

Jason

2,621
2
22
33

6

This was the only solution I found working, WITHOUT disabling autocomplete. – Xeroxoid Sep 19 '11 at 08:55
maybe setting intervals is not necessary as chrome autofills on window.load? – Timo Huovinen Nov 22 '11 at 10:48
2

Works without removing auto complete, much better solution than the ones with millions of up votes. – Ally Sep 06 '12 at 14:48
The other solutions did not work for me, even the most upvoted one, but this one did. The problem, which is the opposite of what @Timo said above, is that Chrome does not autofill right at window.load. Even though this worked, one problem with it is that if there are no -webkit-autofill elements, the loop continuously runs. You don't even need an interval for this to work. Simply set a timeout with maybe a 50 millisecond delay and it will work fine. – Gavin Aug 04 '13 at 09:27

score 16 · Answer 6 · edited May 23 '17 at 11:47

16

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

edited May 23 '17 at 11:47

Community

1
1

answered Jan 15 '14 at 16:41

humbads

2,737
1
22
21

Does not play well if the field has multiple shadows applied. – Streching my competence Jan 29 '19 at 17:10

Milan · Answer 7 · 2016-04-20T11:13:33.587

6

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.

edited Apr 20 '16 at 11:13

answered Jan 21 '16 at 09:12

Milan

2,655
1
18
25

score 3 · Answer 8 · answered Aug 06 '15 at 12:55

3

A little bit hacky but works perfectly for me

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

answered Aug 06 '15 at 12:55

maximilianhp

49
4

score 3 · Answer 9 · answered Feb 05 '16 at 09:38

3

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>

answered Feb 05 '16 at 09:38

LeRoy

3,437
2
29
38

This is the only example that worked for me with both text and background on Chrome Version 53.0.2785.116 m – pleshy Sep 23 '16 at 10:06

Confidant · Answer 10 · 2012-10-08T22:34:39.220

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


    }
});

Don't use this script. If there are no autofilled elements, the loop will continuously run at 20 milliseconds. An interval is unnecessary. Set a timeout after window.load at around 50 milliseconds and that will be plenty of time to remove the styling. — Gavin, Aug 04 '13 at 09:28

score 2 · Answer 11 · answered Jan 18 '13 at 00:24

2

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

answered Jan 18 '13 at 00:24

Arjan

63
1

Is what works for me. But the BUG still there, and as can be seen, no date to be fixed. https://code.google.com/p/chromium/issues/detail?id=46543#c22 – Eduardo M Jun 06 '13 at 07:01
You never clear your interval. This is sloppy code, don't use it. – Gavin Aug 04 '13 at 09:30
1

Actually this doesnt work. I cant type anything in the inputs since they're constantly getting cloned. almost there... – Dustin Silk Apr 30 '15 at 09:40
try this 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);}); – Dustin Silk Apr 30 '15 at 09:49

score 2 · Answer 12 · answered May 22 '15 at 23:48

2

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.

answered May 22 '15 at 23:48

Matt Goo

1,008
11
10

score 2 · Answer 13 · answered Jun 28 '15 at 10:53

2

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

answered Jun 28 '15 at 10:53

Bhavesh G

2,844
4
35
63

Alex · Answer 14 · 2015-02-03T14:37:12.640

1

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

edited Feb 03 '15 at 14:37

answered Feb 03 '15 at 14:01

Alex

4,296
4
31
54

1

add a `!important` is necessary but thanks, its helped me alot. – Polochon Mar 09 '15 at 21:43

score 1 · Answer 15 · answered Jan 25 '12 at 01:42

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.

cryss · Answer 16 · 2013-02-01T15:18:38.710

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.

score 0 · Answer 17 · answered Apr 25 '14 at 22:51

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

score 0 · Answer 18 · answered May 14 '14 at 18:41

0

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

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

answered May 14 '14 at 18:41

user3638028

39
2

score 0 · Answer 19 · answered Jun 25 '14 at 12:40

0

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

answered Jun 25 '14 at 12:40

Ahmad Ajmi

5,905
3
29
51

Does not work in Chrome. As soon as the field becomes type=password, Chrome fills it in – mowgli Aug 19 '14 at 13:41

score 0 · Answer 20 · answered Apr 30 '15 at 09:50

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

score 0 · Answer 21 · answered Jul 21 '15 at 09:11

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

score 0 · Answer 22 · answered Sep 25 '15 at 14:45

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

score 0 · Answer 23 · answered Oct 28 '15 at 16:41

0

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.

answered Oct 28 '15 at 16:41

Matas Vaitkevicius

49,230
25
212
228

score 0 · Answer 24 · answered Oct 08 '18 at 12:31

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

score 0 · Answer 25 · answered Jun 03 '11 at 09:28

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

score -1 · Answer 26 · edited Apr 11 '14 at 16:47

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

score -2 · Answer 27 · edited May 23 '17 at 12:02

-2

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

Google Chrome form autofill and its yellow background

28 Answers28

Linked

Related