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!

Share with friends

22
Leave a Reply

avatar
22 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
22 Comment authors
riteshMahbubLuqueWes FierceFrogPrincess Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Hairgel_Addict
Hairgel_Addict

hm.. maybe I’m weird, but that’s the first thing I’ve noticed after installing that toolbar..

sindhu
sindhu

neat! heh and i thought it had something to do with the CSS lol

Stallon Selvan
Stallon Selvan

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!

Jhon Hebrink
Jhon Hebrink

good idea… thanks

listikal
listikal

Sounds like Google needs another update to their toolbar.

conservatories
conservatories

Just what i needed, for my insolvency website.

Ahmed Zubair
Ahmed Zubair

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

Regards.

QuickOnlineTips
QuickOnlineTips

@Ahmed – the yellow background is created by the Google toolbar. It is not actually there.

cotswoldjohn
cotswoldjohn

thx, saved me hours.

regards…john.

Excuse me...
Excuse me...

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.

Sophie
Sophie

Thanks – this saved me hours too (after the 45 minutes or so already spent scratching my head!)

Joey
Joey

To override it, look into the usage of !important in your stylesheet or search javascript google toolbar yellow background and become informed.

prototip
prototip

Nice site, cool post!

Todd
Todd

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.

Lisa
Lisa

Thank you! This was driving me nuts!

kickgo
kickgo

just add the word “!important” in css, just simple as that.

Sarang
Sarang

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

FrogPrincess
FrogPrincess

Thanks!!! This was driving me nuts as well. I thought it was a Firefox thing – it was the one single thing I thought I.E. had over Firefox. But now I know better. :)

Wes Fierce
Wes Fierce

Thank you! That was driving me crazy! O_*

Luque
Luque

use input { background-color: white ! important}

Mahbub
Mahbub

Although there’s way to turn it off as you described, we can’t assume users will do so. People who have GTB installed will see the fields like that. So a suggestion is to never style the form fields with white or yellow text color. It will simply make the text unreadable.

ritesh
ritesh

thanks dear