Override browser form-filling and input highlighti

Question

I have 2 basic forms -- sign in and sign up, both on the same page. Now, I have no problem with the sign in form auto-filling, but the sign up form auto fills as well, and I don't like it.

Also, the form styles get a yellow background which I can't manage to override and I don't want to use inline CSS to do so. What can I do to make them stop being colored yellow and (possibly) auto filling? Thanks in advance!

Answer 1

<form autocomplete="off">

Pretty much all modern browsers will respect that.

Answer 2

Why not just put this in your css:

input --webkit-autocomplete {
  color: inherit;
  background: inherit;
  border: inherit;
}

That should take care of your issue. Although it does raise a usability issue because now the user can't see that the form was autofilled in the way he/she is used to.

[edit] After posting this I saw that a similar answer was already given and that you commented on it that it didn't work. I don't quite see why because it did work when I tested it.

Answer 3

Sometimes autocomplete on the browser still autocompletes when you just have the code in the <form> element.

I tried putting it in the <input> element as well and it worked better.

<form autocomplete="off">  AND  <input autocomplete="off">

Support for this attribute however is ceasing, please read https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1

https://bugzilla.mozilla.org/show_bug.cgi?id=956906

---

Another work around that I've found is taking out placeholders inside of the input fields that suggest that it is an email, username, or phone field (ie. "Your Email", "Email", etc.")

This makes it so that browsers don't know what kind of field it is, thus doesn't try to autocomplete it.

Answer 4

You can also change the name attribute of your form elements to be something generated so that the browser won't keep track of it. HOWEVER firefox 2.x+ and google chrome seems to not have much problems with that if the request url is identical. Try basically adding a salt request param and a salt field name for the sign-up form.

However I think autocomplete="off" is still top solution :)

Answer 5

Add this CSS rule, and yellow background color will disapear. :)

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

Answer 6

I've seen Google toolbar's autocomplete feature disabled with javascript. It might work with some other autofill tools; I don't know if it'll help with browsers built in autocomplete.

<script type="text/javascript"><!--
  if(window.attachEvent)
    window.attachEvent("onload",setListeners);

  function setListeners(){
    inputList = document.getElementsByTagName("INPUT");
    for(i=0;i<inputList.length;i++){
      inputList[i].attachEvent("onpropertychange",restoreStyles);
      inputList[i].style.backgroundColor = "";
    }
    selectList = document.getElementsByTagName("SELECT");
    for(i=0;i<selectList.length;i++){
      selectList[i].attachEvent("onpropertychange",restoreStyles);
      selectList[i].style.backgroundColor = "";
    }
  }

  function restoreStyles(){
    if(event.srcElement.style.backgroundColor != "")
      event.srcElement.style.backgroundColor = "";
  }//-->
</script>