Toolbox Blog: resources, tips, tricks & info for creative professionals

Get Rid of Yellow Form Fields Once and For All

Have you ever created a website form and wondered why when you go to the form on the website that certain fields have a yellow background in the form field?

This is the Google toolbar that turns these fields yellow. On the toolbar there is an “auto fill” option. This tells the user that they can use this option to auto fill certain fields on your form (which are marked in yellow).


The Problem

In CSS if you declare a background color of your form fields this will typically change the background color for all the fields except the fields that are marked by Google for auto fill.

For example, CSS code that looks like:

input {
background: #F3F4EC;
}

Results in a form that looks like:

Yellow Form Fields

Not only are some of the fields an ugly yellow color, but the coloring is also misleading to users. Most web users are unaware of the yellow, “auto fill” option and instead assume that yellow indicates a required field. In the case of the form above, the Phone field is yellow even though it’s not a required field.

As you can probably guess, these yellow fields are bad news:

Confusing Forms = A Drop in Conversions


The Fix

To override the yellow background all you have to do is declare your background as important.

Change the CSS to:

input {
background: #F3F4EC !important;
}

Then the form looks like this:

No More Yellow Form Fields

Problem solved. The yellow fields are gone and the form is much more user-friendly.

Tags: ,

11 Responses to “Get Rid of Yellow Form Fields Once and For All”

  1. Suffian Says:

    Nice post. I like seeing styled forms. I think it adds character to an interface and shows visitors that the designers took a little time to make their site look just a bit more original.

  2. Yuji Says:

    Hey there, thank you so much for this.

    You are right, and there are many more reasons why this is not a good feature of google toolbar. Any kind of confusion is very bad for consumer trust.

    I’d wager that most people know not that their toolbar is the thing doing the highlighting.

    I wouldn’t have known if my IE didn’t have the toolbar either.

    Google said they have change it in an updated version to only highlight when a user has their cursor over their “fill forms’ but plenty of users have the old one.

  3. Jody Says:

    Hello,

    I did this but it does not help for drop done menu’s ANY IDEAS ?

    Please help

    Thank you

  4. el Seco Says:

    Jody–

    Of course it does not help for drop down menus. The drop down menu is the select tag, NOT the input tag. In order for it to work for them, you need another style. Something like this:

    select {
    background: #F3F4EC !important;
    }

    It is that easy. By the way, you would need the same for textareas as well (although I don’t think that Google’s AutoFill highlights textareas). You might simply separate the tag names with commas, like so:

    input, select, textarea {
    background: #F3F4EC !important;
    }

    Cheers.

  5. Jamie Larsen Says:

    This is a great post. Many of my clients asked why some of their form fields were yellow. Since I develop initially in in Firefox, I didn’t notice it. It just seems to be an IE thing. I guess Google thought that it might be a nice thing to mark fields yellow so users would know which fields the AutoFill would populate. Too bad many of the users of the Google Toolbar don’t even know about the AutoFill feature. I wonder what other features we are unaware of.

  6. Alon Goldshuv Says:

    thank you! this was very helpful. I had suspected it had to do with an auto-complete related feature but didn’t relate it to the google toolbar. cheers.

  7. ator Says:

    funny, you want to change the yellow in these forms.
    yet your own comment form has yellow in the first two fields here.
    anyways, this is sort of a standard by now.

  8. admin Says:

    @ator – yes, but if you notice the fields that are yellow on our form are required fields.

    The point of the post was to draw attention to the fact that yellow in forms can be misleading – causing users to think that a field is required when it isn’t. We weren’t saying that having yellow tint in forms is bad, just letting people know how to change them if the default settings are affecting their forms usability in a negative way.

  9. Charissa Says:

    I did this, but for some reason mine are still yellow. My input looked a bit different, the code is:

    .cform input:hover,
    .cform textarea:hover,
    .cform select:hover {
    background:#444;

    I changed it to

    }
    .cform input:hover,
    .cform textarea:hover,
    .cform select:hover {
    background:#444!important;
    }

    I also tried putting one space, as well as two spaces in between 444 and !important.
    Not working.
    Any ideas?

  10. Nev Says:

    Brilliant! So simple and works great.

  11. rawraj Says:

    It does not work for me :-(
    This is my tag
    input {
    background:#DEDEDD;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #DEDEDD;
    border-right-color: #DEDEDD;
    border-bottom-color: #999;
    border-left-color: #DEDEDD;
    }

    Where am I going wrong.

    As you see I had put in the background tag as background-color: #DEDEDD;
    But then I decided to try only background like you mentioned since the earlier one was not working.
    I am using Firefox 3.5.3 version and google toolbar version 3.1.20081127W

    The css displays perfectly in IE and Chrome

Leave a Reply

SEARCH BLOG
DreamTemplate - Web Templates     Host 6 Domains on 1 Account

Graphics.com/Learning    

Website 120x60 Logo    
ARCHIVES

SUBSCRIBESubscribe
ABOUT AGENCYTOOL At its core, AgencyTool exists to serve as a resource for creative agencies, whether they be into web design, print, advertising or anything else. Here on the AgencyTool Blog you'll find a mish-mosh of resources and thoughts that we think are worth sharing.

Feel free to comment on a post or drop us a note if you've got something to say. We love comments, so we don't use nofollow, but we do moderate - you've been warned!
 

 

How is AgencyTool.com different from other web directories?

  Quality Listings. We're selective. We take the time to individually review each submission, so you know the companies listed with us are legitimate and of the highest quality. If you list with us, you know your brand will be associated with the Nation's Premiere Creative Agency Directory. Always above the board, and always there for you... Get Listed Now!