July 2nd, 2007

How to Remove Yellow Form Fields Background Color

Whenever I tweak my website design, a yellow form field background often fills up some (not all) form fields in my web browser (both IE and Firefox). I tried tweaking the site CSS and tried all sorts of form field tweaks, but the Yellow Form Field Background would just not go away. I am sure the yellow form fields bugs all web designers too. I finally identified the cause…

Yellow Form Fields

I identified that the cause of the yellow form field background was the Google Toolbar (one of the popular toolbars) Though most of us add the very useful Google toolbar to our browsers, we fail to check the option and settings which influence the way we browse.

Remove Yellow Form Field Background Color

In the installed Google Toolbar, select the “Settings” drop down menu (on the extreme right side) and click on “Options”. Under the large range of features, locate Autofill and click the “Autofill Settings” button. At the bottom you will find the Highlight option. Uncheck the box “Highlight fields on webpages that Autofill can update in Yellow” and press OK. Refresh your webpages and the yellow form field background is gone!

Tip: You can get QOT updates from the latest Google Toolbar - Click here.

Bookmark this article on Del.icio.us or Stumbleupon or Digg or Fark
Continue getting our new articles by RSS or email

Related articles
Top Posts of July 2007
Blend Google Adsense for Search with Customized Background
Most Popular and Top Posts
Free EyeDroppers / Color Pickers for Web Developers
WordPress Custom Fields Contest

Comments

RSS feed for comments on this post.

1. Hairgel_Addict | 3/07/07 #

hm.. maybe I’m weird, but that’s the first thing I’ve noticed after installing that toolbar..
2. sindhu | 3/07/07 #

neat! heh and i thought it had something to do with the CSS lol
3. Stallon Selvan | 3/07/07 #

This was known about 2 years back when google’s autofill feature was released in the google toolbar…. you never had to ponder so much!
4. Jhon Hebrink | 3/07/07 #

good idea… thanks
5. listikal | 3/07/07 #

Sounds like Google needs another update to their toolbar.
6. conservatories | 11/07/07 #

Just what i needed, for my insolvency website.
7. Ahmed Zubair | 19/07/07 #

The solution you mentioned stands for the single user to do it independently on his machine only, any good suggestion for the website?

Regards.
8. QuickOnlineTips | 19/07/07 #

@Ahmed - the yellow background is created by the Google toolbar. It is not actually there.
9. cotswoldjohn | 25/08/07 #

thx, saved me hours.

regards…john.
10. Excuse me... | 29/08/07 #

I think the real thing is here that any noob knows the yellow bg is caused by the google toolbar autofill… What people who build websites need to know is a fix for removing it from their web forms.
11. Sophie | 5/09/07 #

Thanks - this saved me hours too (after the 45 minutes or so already spent scratching my head!)
12. Joey | 15/09/07 #

To override it, look into the usage of !important in your stylesheet or search javascript google toolbar yellow background and become informed.
13. prototip | 22/11/07 #

Nice site, cool post!
14. Todd | 27/11/07 #

Joey is right, check out: http://www.agencytool.com/work-tools/get-rid-of-yellow-form-fields-once-and-for-all.html to see how to do the stylesheet fix.
15. kurye | 26/02/08 #

this subject is very important for us . thank for subject. please write back soon
16. Lisa | 20/03/08 #

Thank you! This was driving me nuts!
17. kickgo | 4/05/08 #

just add the word “!important” in css, just simple as that.
18. Sarang | 5/05/08 #

Thanks a lot. That was a great help to get out of annoying yellow background!