[autocomplete] Removing input background colour for Chrome autocomplete?

On a form I'm working on, Chrome is auto-filling the email and password fields. This is fine, however, Chrome changes the background colour to a pale yellow colour.

The design I'm working on is using light text on a dark background, so this really messes up the look of the form - I have stark yellow boxes and near-invisible white text. Once the field is focused, the fields return to normal.

Is it possible to stop Chrome changing the colour of these fields?

This is my solution, I used transition and transition delay therefore I can have a transparent background on my input fields.

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

Adding one hour delay would pause any css changes on the input element.
This is more better rather than adding transition animation or inner shadow.

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
  transition-delay: 3600s;
}

Although solutions that can be found in many answers do work in Chrome, they do not work in Safari for Mac and iOS.

Safari requires an additional statement – background-clip.

This is the full code for a solution that works across all major browsers on different platforms:

/* Disable autofill highlighting */
input:-webkit-autofill  {
  -webkit-text-fill-color: var(--text-input-color) !important;
  -webkit-box-shadow: 0 0 0 1rem var(--page-background-color) inset !important;
  background-clip: content-box !important;
}

(Please change the --text-input-color and --page-background-color with your own values.)

I've got a solution if you want to prevent the autofill from google chrome but its a little bit "machete" , just remove the class that google chrome adds to those inputs fields and set the value to "" if you dont need to show store data after load.

$(document).ready(function () {
    setTimeout(function () {
            var data = $("input:-webkit-autofill");
            data.each(function (i,obj) {
            $(obj).removeClass("input:-webkit-autofill");
                    obj.value = "";
            });
    },1);           
});

After 2 hours of searching it seems google still overrides the yellow color somehow but i for the fix for it. That's right. it will work for hover, focus etc as well. all you have to do is add !important to it.

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

this will completely remove yellow from input fields

Thanks Benjamin!

The Mootools solution is a little more tricky, as I can't get fields by using $('input:-webkit-autofill'), So what I've used is the following:

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

  window.addEvent('load', function() {
    setTimeout(clearWebkitBg, 20);
    var elems = getElems();
    for (var i = 0; i < elems.length; i++) {
      $(elems[i]).addEvent('blur', clearWebkitBg);
    }
  });
}
function clearWebkitBg () {
  var elems = getElems();
  for (var i = 0; i < elems.length; i++) {
    var oldInput = $(elems[i]);
    var newInput = new Element('input', {
      'name': oldInput.get('name'),
      'id': oldInput.get('id'),
      'type': oldInput.get('type'),
      'class': oldInput.get('class'),
      'value': oldInput.get('value')
    });
    var container = oldInput.getParent();
    oldInput.destroy();
    container.adopt(newInput);
  }
}
function getElems() {
  return ['pass', 'login']; // ids
}

Try this: Same as @Nathan-white answer above with minor tweaks.

/* For removing autocomplete highlight color in chrome (note: use this at bottom of your css file). */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: all 5000s ease-in-out 0s;
    transition-property: background-color, color;
}

This works for me.

.input:-webkit-autofill {transition: background-color 5000s ease-in-out 0s;}

As mentioned before, inset -webkit-box-shadow for me works best.

/* Code witch overwrites input background-color */
input:-webkit-autofill {
     -webkit-box-shadow: 0 0 0px 1000px #fbfbfb inset;
}

Also code snippet to change text color:

input:-webkit-autofill:first-line {
     color: #797979;
}

and this worked for me (Chrome 76 tested)

input:-internal-autofill-selected {
    background-color: transparent;
}

For those who are using Compass:

@each $prefix in -webkit, -moz {
    @include with-prefix($prefix) {
        @each $element in input, textarea, select {
            #{$element}:#{$prefix}-autofill {
                @include single-box-shadow(0, 0, 0, 1000px, $white, inset);
            }
        }
    }
}

I give up!

Since there is no way to change the color of the input with autocomplete I decide to disable all of them with jQuery for webkit browsers. Like this:

if (/webkit/.test(navigator.userAgent.toLowerCase())) {
    $('[autocomplete="on"]').each(function() {
        $(this).attr('autocomplete', 'off');
    });
}

This has been as designed since this coloring behavior has been from WebKit. It allows the user to understand the data has been prefilled. Bug 1334

You could turn off autocomplete by doing (or on the specific form control:

<form autocomplete="off">
...
</form

Or you can change the colour of the autofill by doing:

input:-webkit-autofill {
    color: #2a2a2a !important;
}

Note, there is a bug being tracked for this to work again: http://code.google.com/p/chromium/issues/detail?id=46543

This is a WebKit behavior.

A possible workaround for the moment is to set a "strong" inside shadow:

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

SASS

input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-property: background-color, color

Unfortunately strictly none of the above solutions worked for me in 2016 (a couple years after the question)

So here's the aggressive solution I use:

function remake(e){
    var val = e.value;
    var id = e.id;
    e.outerHTML = e.outerHTML;
    document.getElementById(id).value = val;
    return true;
}

<input id=MustHaveAnId type=text name=email autocomplete=on onblur="remake(this)">

Basically, it deletes the tag while saving the value, and recreates it, then puts back the value.

To have a transparent background while not using a time delay (especially needed in modern web applications where people can stop using it for a while and want a predictable behavior of the interface), use this:

input:-webkit-autofill { 
    -webkit-background-clip: text;
}

body {
  background: lightblue;
}

input {
  background: transparent;
}

input.no-autofill-bkg:-webkit-autofill {
  -webkit-background-clip: text;
}

<input type="text" name="email" />
<input type="text" name="email" class="no-autofill-bkg" />

Working on: Chrome 83 / 84.0.4147.89, Edge 84.0.522.44

If you decide to re-post my solution, I only ask that you include my name or link to this.

This is complex solution for this task.

(function($){_x000D_
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {_x000D_
       $('input, select').on('change focus', function (e) {_x000D_
            setTimeout(function () {_x000D_
                $.each(_x000D_
                    document.querySelectorAll('*:-webkit-autofill'),_x000D_
                    function () {_x000D_
                        var clone = $(this).clone(true, true);_x000D_
                        $(this).after(clone).remove();_x000D_
                        updateActions();_x000D_
                    })_x000D_
            }, 300)_x000D_
        }).change();_x000D_
    }_x000D_
    var updateActions = function(){};// method for update input actions_x000D_
    updateActions(); // start on load and on rebuild_x000D_
})(jQuery)

*:-webkit-autofill,_x000D_
*:-webkit-autofill:hover,_x000D_
*:-webkit-autofill:focus,_x000D_
*:-webkit-autofill:active {_x000D_
    /* use animation hack, if you have hard styled input */_x000D_
    transition: all 5000s ease-in-out 0s;_x000D_
    transition-property: background-color, color;_x000D_
    /* if input has one color, and didn't have bg-image use shadow */_x000D_
    -webkit-box-shadow: 0 0 0 1000px #fff inset;_x000D_
    /* text color */_x000D_
    -webkit-text-fill-color: #fff;_x000D_
    /* font weigth */_x000D_
    font-weight: 300!important;_x000D_
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<input type="text" name="name" autocomplete="name"/>_x000D_
<input type="email" name="email" autocomplete="email"/>

use this and check your problem issue is resolved

<input type="email" id="email" name="email" class="form-control validate" onfocus="this.removeAttribute('readonly');" readonly> 

In addition to this:

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

You might also want to add

input:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px rgba(82, 168, 236, 0.6);
}

Other wise, when you click on the input, the yellow color will come back. For the focus, if you are using bootstrap, the second part is for the border highlighting 0 0 8px rgba(82, 168, 236, 0.6);

Such that it will just look like any bootstrap input.

I had an issue where I couldn't use box-shadow because I needed the input field to be transparent. It's a bit of a hack but pure CSS. Set the transition to a very long amount of time.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
}

i use this. work for me. remove yellow background of field.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:valid,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus
{
    -webkit-transition-delay: 99999s;
    -webkit-text-fill-color:#D7D8CE;
}

If you want to keep the autocomplete functionality intact you can use a bit of jQuery to remove Chrome's styling. I wrote a short post about it here: http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/

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

None of the solutions worked for me, the inset shadow won't work for me because the inputs have a translucent background overlaid over the page 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 at all.

After the page loads, with javascript you can either dynamically 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 is broken!

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

Chrome 34.0.1847.116, OSX 10.7.5

I have a pure CSS solution which uses CSS Filters.

filter: grayscale(100%) brightness(110%);

The grayscale filter replaces the yellow with grey, then the brightness removes the grey.

SEE CODEPEN

This worked for me:

padding: 5px;
background-clip: content-box;

This will work for input, textarea and select in normal, hover, focus and active states.

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

Here is SCSS version of the above solution for those who are working with SASS/SCSS.

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill
{
    &, &:hover, &:focus, &:active
    {
        -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    }
}

Simple, just add,

    autocomplete="new-password"

to the password field.

Google Chrome user agent prevent developers' CSS, So for changing autofill UI must use another property like these:

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #d500ff inset !important;
    /*use inset box-shadow to cover background-color*/
    -webkit-text-fill-color: #ffa400 !important;
    /*use text fill color to cover font color*/
}

The solution of Daniel Fairweather (Removing input background colour for Chrome autocomplete?) (I would love to upvote his solution, but still need 15 rep) works really good. There is a really huge difference with most upvoted solution : you can keep background images ! But a little modification (just Chrome check)

And you need to keep in mind, it ONLY works on visible fields !

So you if you are using $.show() for your form, you need to run this code After show() event

My full solution (I have a show/hide buttons for login form ):

 if (!self.isLoginVisible()) {
        var container = $("#loginpage");
        container.stop();
        self.isLoginVisible(true);
        if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {

            var documentForms = document.forms;
            for (i = 0; i < documentForms.length; i++) {
                for (j = 0; j < documentForms[i].elements.length; j++) {
                    var input = documentForms[i].elements[j];

                    if (input.type == "text" || input.type == "password" || input.type == null) {
                        var text = input.value;
                        input.focus();
                        var event = document.createEvent('TextEvent');
                        event.initTextEvent('textInput', true, true, window, 'a');
                        input.dispatchEvent(event);
                        input.value = text;
                        input.blur();
                    }
                }
            }
        }

    } else {
        self.hideLogon();
    }

Sorry again, I would prefer it to be a comment.

If you want, I can put a link to the site where I used it.

try this for hide autofill style

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    background-color: #FFFFFF !important;
    color: #555 !important;
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #555555 !important;
    }

We can use the -webkit-autofill pseudo-selector to target those fields and style them as we see fit. The default styling only affects the background color, but most other properties apply here, such as border and font-size. We can even change the color of the text using -webkit-text-fill-color which is included in the snippet below.

/* Change Autocomplete styles in Chrome*/

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

It might be a little late but for future referent there is a CSS ONLY solution as Olly Hodgons shows here http://lostmonocle.com/post/1479126030/fixing-the-chrome-autocomplete-background-colour

All you have to do is to add a further selector to overwrite the default input fields setting So use instead of

input:-webkit-autofill {
    background-color: #FAFFBD !important;
}

Somthing like

#login input:-webkit-autofill {
    background-color: #ff00ff;
}

or

form input:-webkit-autofill {
    background-color: #f0f;
}

which seems to work fine with me.

I have developed another solution using JavaScript without JQuery. If you find this useful or decide to re-post my solution, I only ask that you include my name. Enjoy. – Daniel Fairweather

var documentForms = document.forms;

for(i = 0; i < documentForms.length; i++){
    for(j = 0; j < documentForms[i].elements.length; j++){
        var input = documentForms[i].elements[j];

        if(input.type == "text" || input.type == "password" || input.type == null){
            var text = input.value;
            input.focus();
            var event = document.createEvent('TextEvent');
            event.initTextEvent('textInput', true, true, window, 'a');
            input.dispatchEvent(event);
            input.value = text;
            input.blur();
        }
    }
}

This code is based on the fact that Google Chrome removes the Webkit style as soon as additional text is entered. Simply changing the input field value does not suffice, Chrome wants an event. By focusing on each input field (text, password), we can send a keyboard event (the letter 'a') and then set the text value to it's previous state (the auto-filled text). Keep in mind that this code will run in every browser and will check every input field within the webpage, adjust it accordingly to your needs.

All of the above answers worked but did have their faults. The below code is an amalgamation of two of the above answers that works flawlessly with no blinking.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

resurrection of thread at two years later. im working around this issue about days and found a simple trick for the prevent this ugly autocomplete feature:

just add a random string to form target like <form action="site.com/login.php?random=123213">

it works on recent chrome version 34.0.1847.137

update: if it does not work, give strange protocol to action like <form id="test" action="xxx://"> and fill this area later with javascript:

$('#test').attr('action', 'http://example.site/login.php');

update 2: still having issues with that, i decided to completely remove the <form> tag and post variables via jquery. its more easy.

I have a better solution.

Setting the background to another color like below didn't solve the problem for me because I needed a transparent input field

-webkit-box-shadow: 0 0 0px 1000px white inset;

So I tried some other things and I came up with this:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

input:-webkit-autofill {
  border: none;
  border-radius: .3rem;
  caret-color: #fff; /* Pour le I quand on édite */
  color: #fff;
  background: #292a2d;
  /* webkit autofill */
  -webkit-text-fill-color: #fff; /* Surcharge la font color d'autofill */
  -webkit-background-clip: text; /* Supprime le background autofill, utile pour le border radius */
  box-shadow: 0 0 0 50px #292a2d inset; /* Ajoute un fake background à base d'ombrage aplatit */
}

The previous solutions of adding a box-shadow works well for people who need a solid colour background. The other solution of adding a transition works, but having to set a duration/delay will mean that at some point it may show again.

My solution is to use keyframes instead, that way it will always show the colours of your choosing.

@-webkit-keyframes autofill {
    0%,100% {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

Example Codepen: https://codepen.io/-Steve-/pen/dwgxPB