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!

22 comments on “How to Remove Yellow Form Fields Background Color

  1. Hairgel_Addict says:

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

  2. sindhu says:

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

  3. Stallon Selvan says:

    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 says:

    good idea… thanks

  5. listikal says:

    Sounds like Google needs another update to their toolbar.

  6. conservatories says:

    Just what i needed, for my insolvency website.

  7. Ahmed Zubair says:

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


  8. QuickOnlineTips says:

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

  9. cotswoldjohn says:

    thx, saved me hours.


  10. Excuse me... says:

    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 says:

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

  12. Joey says:

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

  13. prototip says:

    Nice site, cool post!

  14. Todd says:

    Joey is right, check out: to see how to do the stylesheet fix.

  15. Lisa says:

    Thank you! This was driving me nuts!

  16. kickgo says:

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

  17. Sarang says:

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

  18. FrogPrincess says:

    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. :)

  19. Wes Fierce says:

    Thank you! That was driving me crazy! O_*

  20. Luque says:

    use input { background-color: white ! important}

  21. Mahbub says:

    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.

  22. ritesh says:

    thanks dear

Leave a Reply

Your email address will not be published. Required fields are marked *

All comments moderated. Use True name. No irrelevant links. Post useful content.