Stop Chrome messing with your forms

Published 22 Nov 2014 in Browsers, Development, HTML & CSS by Alan James

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

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

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.


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.


  1. On 23 Nov 2014 at 15:35, Eric Duvall said:

    Very impressive, thank you for posting!

  2. On 26 Nov 2014 at 14:45, Viki said:

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

    Thanks a lot from beginning web-dev :P

  3. On 01 Dec 2014 at 17:06, Grad Potential said:

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

  4. On 28 Dec 2014 at 18:55, Juanqui vegetariano said:

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

  5. On 02 Jan 2015 at 14:38, gracia said:

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

  6. On 09 Feb 2015 at 00:10, john said:

    Thanks for sharing this info

  7. On 08 Mar 2015 at 21:15, darfin arifin said:

    nice info :)

  8. On 17 Mar 2015 at 16:21, Manu said:

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

  9. On 28 Jul 2015 at 04:36, Ken said:

    Excellent info! Thanks!

  10. On 15 Aug 2015 at 17:03, Davide Orsi said:

    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. On 18 Nov 2015 at 11:02, Ajay said:

    its very good tutorial to help with autofill. Thanks

  12. On 30 Nov 2015 at 07:28, Krishna Kant Shukla said:

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

  13. On 23 Dec 2015 at 12:01, BB said:

    Good thinking!

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

  14. On 12 Jan 2016 at 08:32, Gowtham said:


  15. On 18 Jan 2016 at 00:56, Santa said:

    Look here for an alternative that works for me with transparent background see Nathan’s White response on stack overflow

  16. On 22 Jan 2016 at 12:09, Fabian said:

    Thanks for your solution

  17. On 02 May 2016 at 15:20, Xander Beltrixx said:

    Thank you very much.

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

  18. On 17 Aug 2016 at 21:16, Sher Bahadur said:

    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. On 09 Jan 2017 at 09:15, Shayne O said:

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

  20. On 03 Feb 2017 at 18:53, Greatscot said:

    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 [email protected].