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.