Stop Chrome messing with your forms

Google Chrome may be a popular and easy to use browser, but it plays fast and loose with website designers’ wishes regarding forms on their sites.

It autocompletes form fields – useful sometimes, but it doesn’t always get the values right. And it’s a security nightmare if you’re using a public computer.

Not only that, it autofills form fields when a page loads, and often gets the values wrong, because it always assumes that the input field directly before a password field is a username or email address.

And don’t get me started on the horrible yellow background it imposes on autocompletable fields, and the weird blue glow it puts around fields when you tab into them.

In this post I will show you how to prevent all of these intrusions when you’re creating forms on web pages.

Disable Google Chrome Autocomplete

This is the easiest one. In other browsers such as Firefox you can turn autocomplete on and off on a “per-field” basis, but Chrome will rather stupidly only enable or disable it for the whole form. This is how you disable it:

<form action="XXX" method="post" autocomplete="off">
 
. . .
 
<input type="whatever" name="whatever" value="" autocomplete="off" />
 
. . .
 
</form>

The input field is included because it’s how Chrome should work (and how Firefox does work).

Disable Google Chrome Autofill

If Chrome encounters a login form with a password field, it will often try to autofill the details, and this can be both annoying and a security risk. Luckily there’s a way to stop this happening. By adding two hidden fields (a normal text field and a password field) before the fields that actually need to be completed, Google will think these two fields are the ones to autofill, and it won’t notice the other fields that follow. Here’s the example:

<form action="XXX" method="post" autocomplete="off">
<input style="display:none;" type="text" name="somefakename" />
<input style="display:none;" type="password" name="anotherfakename" />

 
. . .
 
<input type="text" name="realusername" value="" autocomplete="off" />
<input type="password" name="realpassword" value="" autocomplete="off" />
 
. . .
 
</form>

In the above example, the fields named realusername and realpassword will not get autofilled. I kept the autocomplete=”off” in the example as well, since if you want to prevent autofill, you probably want to prevent autocomplete as well.

Disable Google Chrome Yellow Field Background

The yellow background that Chrome applies to fields that it has autocompleted or that it wants to autocomplete is supremely annoying for any designer (or anyone with art in their soul). The colour is a particularly irritating shade of yellow, is guaranteed to clash with something on the page, and is probably virtually invisible to anyone who is colourblind anyway. In short, it fulfils no purpose.

The fix is quite simple and involves a tiny bit of CSS.

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

This puts a solid white shadow inside the field, big enough to obliterate any colour that Chrome has put there without you asking. Ingenious. I’d love to claim credit but I can’t – I found it while looking for a CSS solution to some other problem.

Disable Google Chrome Blue Field Outline

And finally, that horrible blue glow that Chrome puts to the field where you’re typing. It makes no sense, since when you’re typing, you can see the letters appear in the field anyway, which is a bit of a hint as to which field has the focus.

The solution here is also a CSS one:

textarea, input, *:focus { outline: none !important; }

Bingo – no more blue glow.

Postscript

I know that all these Chrome ‘features’ were probably created with the best of intentions, and some may even improve accessibility for some users. However, what Google didn’t do was give developers an easy choice as to whether to use them – and by publishing this piece I’m restoring that choice. Most of the solutions I’ve presented are available in other places on the web if you look hard enough, I’ve simply gathered them into one place.

20 Comments

  1. Very impressive, thank you for posting!

  2. Is that really this simple? OMG and I spend hours trying to figure this out.

    Thanks a lot from beginning web-dev 😛

  3. Great idea. Thanks for sharing. The autocomplete in Chrome sucks!!!!

  4. Oh my god!!! autocomplete=”off” and that’s it? I will try it, thanks a lot for this useful post!

  5. tried out the code for disabling the yellow background, works quite well. Goid thing you shared this.

  6. Thanks for sharing this info

  7. nice info 🙂

  8. Thanks a lot, was searching for this for a long time !

  9. Excellent info! Thanks!

  10. Disable Google Chrome Yellow Field Background
    I need a transparent background and filling a coloured shadow is not a workaround for me, but overall great job ; )

  11. its very good tutorial to help with autofill. Thanks

  12. Good suggestion, but addition of two hidden field is not a good solution.

  13. Good thinking!

    Funny thing is that that auto-fill bug was first reported back at 2011… and still not fixed.

  14. Impressive..

  15. Look here for an alternative that works for me with transparent background see Nathan’s White response on stack overflow http://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete

  16. Thanks for your solution

  17. Thank you very much.

    I was having this issue and your solution worked like a charm 😉

  18. autocomplete=”off”, autocomplete=”false”, autocomplete=”nofill”

    All are not working.
    Please suggest how can I disable this browser autofill from the chrome or get the handle of browser autofill.

  19. Ugh. None of these seem to be working as at jan 2017.

  20. As a user, I don’t want to fill out forms. Is this really a good idea for the user? “My forms look great, but the user hates me…”

Add a Comment

If you have used this form and would like a copy of the information held about you on this website, or would like the information deleted, please email info@zigpress.com.