Yellow Form Fields?

Why do you sometimes see yellow forms fields on web sites?
What are they and why are they there?

The answer is Google Toolbar. If you have Google Toolbar installed and the AutoFill option enabled, Google will remember your personal information so that it can automatically populate form fields for you. Fields such as name, address and phone will all turn yellow if AutoFill is turned on – the default setting.

Although it is good useability for these fields to be highlighted in some way, as a web designer you may not want yellow form fields on your web page for aesthetic reasons.

So, how do you override it…?

For a while I was confused as changing the name of the form fields seems to have no effect – Google still thinks it can auto-complete that field. It turns out that Google actually ‘guesses’ which fields it can complete based on the form field name AND adjacent text which it presumes could be a label!

In the end I found two solutions:

Solution 1.

Create a style to change change the background colour of the field, using the css !important rule.

input { background-color:#FFFFFF !important; }

Solution 2.

Use javascript to remove or change the styles that the Toolbar adds after the page has loaded.

Using this method you can change the background colour of all the fields, or just change the highlighted fields to a different colour to be in-keeping with your design.

To find out how, see Outsmarting the Google Toolbar.

vps hosting, windows vps hosting, linux vps by ukhostingvps
Green Pool Recovery

Ben Huson