How to remove auto complete from google Chrome input?

As stated here and here , it seems that Google Chrome currently ignores any kind of autocomplete="off" attribute, however strange it may seem.

So an (alternative) solution to make Chrome not autocomplete is to create 2 followed fields with the same name="" , one with display="none" (which will not be seen by the user) and another normal, something like this :

<form method="post">
  <input type="email" name="email" id="email_fake" class="hidden" autocomplete="off" style="display: none;" />
  <input type="email" name="email" id="email" autocomplete="off" />
  <input type="password" name="password" id="password_fake" class="hidden" autocomplete="off" style="display: none;" />
  <input type="password" name="password" id="password" autocomplete="off" />
  <input type="submit" value="Submit" />
</form>

Example also available on jsFiddle .

Update 2017

It seems that in the current versions of Google Chrome (I tested on 59.0.3071.104 ), you can solve this like this:

• autocomplete="off" in tag form :

<form method="post" autocomplete="off">
  <input type="email" name="email" id="email" />
  <input type="password" name="password" id="password" />
  <input type="submit" value="Submit" />
</form>

Also in jsFiddle.

Another solution I found was to disable the field, which makes autocomplete not work in any browser (I tested it in Chrome, FF and IE).

Then just enable the field when the form is loaded, because at this point the browser will no longer fill in the fields:

<input type="email" id="email" disabled="disabled" />

And in Javascript , after loading the document, enable the field. In this example, using jQuery :

// Esperar o documento carregar
$(document).ready(function () {
   // Usando um pequeno delay de 100ms porque às vezes o navegador preenche o campo logo que o documento está pronto, e pode não funcionar como esperado
   setTimeout(function(){
     $('#email').removeAttr('disabled');
   }, 100);
});

In fact just put soon after resolves <input style="display: none;" /> , however when you insert an info it already has the yellow background.

Use this:

input:-webkit-autofill 
{    
    -webkit-box-shadow: 0 0 0px 1000px #f9fbfd inset !important;
    -webkit-text-fill-color: #4D90FE !important;
}

I tried to put the autocomplete in the form tag as the colleague quoted and it did not work. I did the duplication only of the email and it worked for the password as well. No need to make the password. End of the problems with yellow fields in Chrome, I believe in other browsers as well. This way it worked:

<form method="post">
  <input type="email" name="email" id="email_fake" autocomplete="off" style="display: none;" />
  <input type="email" name="email" id="email" autocomplete="off" />
  <input type="password" name="password" id="password" autocomplete="off" />
  <input type="submit" value="Submit" />
</form>

You can try this, for me it worked very well.

$(window).load(function() {
    var form = $('#fatherel .container-form').html().replace(/legend/ig, 'form')
    $('#fatherel .container-form').html(form)
});