Yellow Form Fields?
Monday, 4th June 2007Why 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.
May 7th, 2008 at 4:26 pm
Ben, many thanks for pointing to the very simple but effective css ‘!important’ rule. I’m just setting up my Wordpress site and this and the infamous PNG transparency problem have been driving me nuts, and complicated by the fact that I’m completely illiterate when it comes to CSS or PHP. At least that’s one problem out of the way. The Java solution looked a bit too complicated for my codingly challenged brain, but adding that simple piece of code in the right place has done the trick. Flippin’ Google – bah humbug!
Best wishes – Dave