You are here: Home / Dog Blog / Archives

Mystical Yellow Form Fields

Monday 5 January, 2004 (12:37PM GMT)

I have received a number of emails asking why certain form fields on HTML Dog have a yellow background.

"Eh?" was my initial dumbfounded response. There's nothing in the CSS of the website that sets the colour of form elements. But I even saw it with my own eyes on someone else's computer - there it was, a form field with a pale yellow background. Not all form fields, just one apparently randomly coloured input box.

Is this due to different versions of Windows? Odd releases of Internet Explorer? Well no, as it turns out the culprit is the Google Toolbar, that widget thing that you download from Google that adds a search box and some other stuff to Internet Explorer.

There is an 'AutoFill' option on the Google Toolbar (switched on by default), that will 'helpfully' highlight form fields with certain names such as 'email' or 'name'. The only thing is, I don't think that's particularly helpful. No software program can possibly know what are the most important fields to draw to a users attention. As the designer, I should choose how to best highlight areas and what methods I use to attract users to areas that I think are important. I certainly don't want an automated tool messing up a carefully thought out design.

As so many people use IE and the Google Toolbar is undoubtedly popular amongst those users, this is a real issue for web designers.

Jenseng has more information that includes some JavaScript workarounds, but I think the best and most simple method is to just use names that the Google Toolbar won't recognise.

Comments

Comment 1

I have a disability that makes typing difficult and I use the Google Toolbar's AutoFill feature all of the time. It makes filling out forms a lot easier.

Just something to consider before you encourage other designers to make their visitors' browser tools useless.

So said Guy on Tuesday 6 January, 2004 at 8:47PM GMT.

Comment 2

The main problem I have is that the Google Toolbar can't possibly tell which are the best form elements to highlight.

I think the idea is good in principle (although the feature should be off by default rather than on) but as there are no steadfast naming conventions for form element names, the thing is never going to work properly.

Sometimes, where it would be helpful to have the form fields highlighted (as intended by the Google Toolbar), the web designer won't have named the fields in such a way that the Toolbar recognises.

On the flip-side, where it makes no sense to highlight one form field over another, a web designer might inadvertantly apply a name to such a form field that the Google Toolbar latches onto and paints yellow.

So said Patrick on Wednesday 7 January, 2004 at 12:48PM GMT.

Comment 3

does the google toolbar create any other discrepencies that you know about? I as a webmaster - are there certain things I shouldn't use?

So said Slot Buddy on Friday 9 January, 2004 at 10:28AM GMT.

Comment 4

Guys--this is not a big deal. And besides, if the user (aka the customer!) wants, they can easily disable the highlight in the Google Toolbar options page under the "More" tab. The option is named "Automatically highlight fields that AutoFill can fill". I liken this to the same sort of behavior as a client-side stylesheet. Those will mess your site up too!

So said Hal on Saturday 10 January, 2004 at 7:15PM GMT.

Comment 5

It doesn't highlight fields because they are more important than other fields (that wouldn't be helpful, and Google, of all people, knows what is helpful). It highlights them because it already has information stored that it thinks could go in those fields. For instance, if the Google Toolbar has seen you fill in your email address on another form, then it can suggest places where your email address might fit when it sees new forms. It therefore highlights the email field in yellow to let you know it can AutoFill it for you. Many people use this feature, and renaming your fields to something Google won't recognize will probably make these people upset.

So said Joey on Saturday 10 January, 2004 at 8:58PM GMT.

Comment 6

I agree with the apparent consensus; the user's preferences should always always override the author's. If the user chooses to install and use software that changes the appearance of the site, it is none of the author's business. The only issue here is that clearly some users did not understand the significance of the visual feedback they were seeing, and mistook it for design intention rather than interface from software they had installed. Not your problem, Patrick, but certainly an interesting heads-up for all of us who hadn't come across this before.

Liked the article on elastic design, by the way. Not convinced about layouts scaling, but certainly food for thought.

Cheers

Ian Anderson

So said Ian Anderson on Sunday 11 January, 2004 at 8:08PM GMT.

Comment 7

I've found that the Google Toolbar's AutoFill feature is surprisingly good at figuring out which fields to highlight and filling in the correct information. If you want to make it work BETTER on your forms, the "About AutoFill" document at http://toolbar.google.com/autofill_help.html says:

"You can ensure that AutoFill will work on your pages by using field names defined in the ECML (Electronic Commerce Modeling Language) standard, found at http://www.ietf.org/rfc/rfc3106.txt."

I haven't seen a document yet where the highlighting ruins the graphic design, but I can see where someone who doesn't know about AutoFill would wonder why some fields are highlighted and some aren't. I'm the kind of person who investigates every option immediately after installing new software, but maybe I'm weird that way. Perhaps, as Patrick suggests, AutoFill should be off by default.

So said Guy on Tuesday 13 January, 2004 at 8:24PM GMT.

Comment 8

I agree, the Gooogle yellow is a user-end issue and not really important to the designer. To me, the issue is that user agents (and in this case, the Google toolbar is a user agent of a sort) has a responsibility to tell the user what modifications it's making to the author's work. And too often, the user does not know. The fault lies with the user agent, and they should be compelled in some fashion to correct that, and make sure it is plain to each user that this installation deviates from author style and markup in these ways. The market needs to demand this. If authors attempt to circumvent these modifications as Patrick hastily suggested, we're relieving the user agent creators from the burden of being responsible to their users, as well as making the design process more complicated.

So said Neal on Tuesday 13 January, 2004 at 9:31PM GMT.

Comment 9

Neal, there was no haste in my suggestion. In a perfect world the makers of user agents would listen to the people that design web pages to work on them. Unfortunately we know from years of headache from Microsoft casually doing their own thing that they just don't listen (hey Mr. Gates, how's about that max-width property? No? How about an abbr tag? etc. etc.). I'm guessing, but I think it's a good guess that Google won't do a thing to change their features. It is the responsibility of the web designer to look at the tools people are using to view their web pages and design accordingly for them. It does make the design process more complicated, but that's a designers problem.

So said Patrick on Tuesday 13 January, 2004 at 10:15PM GMT.

Comment 10

Guy brings up a really good point. When I originally wrote that piece about javascript workarounds ( http://code.jenseng.com/google/ ), I had the designer in mind and not the user.

Since then I've started looking at it a little differently and added the following note/suggestion ( http://code.jenseng.com/google/#autofillusers ).

Here's the basic idea:

Good designers work with their users and not against them. So if you really don't like yellow and feel inclined to de-style autocomplete fields via javascript, consider this: you and your users would be better off if you simply made those fields a different color altogether rather than reset them to look like the rest. Add a note that only autocomplete users will see explaining that they can use it on this form, and voila! Everybody wins.

So said Jon on Tuesday 20 January, 2004 at 2:57AM GMT.

Comment 11

Thankyou Thankyou Thankyou ! I am new to HTML and creating my first form. I was going nuts trying to figure out why my form had yellow cells. I wasted a bunch of time searching for a color tag to add to the input field to reset it to white or wording workarounds (what else can you call First Name or Address ? geez). I would have never ever thought it was a Google option causing it.

So said dave on Monday 2 February, 2004 at 5:27AM GMT.

Comment 12

I'm so glad I ran across this page today. Some time last week I noticed that certain form fields in Internet Explorer were yellow. Fields asking for email address, name and url were yellow. So ofcourse I thought that this must be some new spyware/adware running on my PC. I feel dumb now but like some have written here, this should be off by default or atleast let the user know what is causing this.

So said Pete on Wednesday 4 February, 2004 at 9:53PM GMT.

Comment 13

Thanks so much for posting this article, I found it via Google and was able to effectively quash what we thought might be a bug in our site today.

So said Dave Spreefelt on Monday 16 February, 2004 at 6:48PM GMT.

Comment 14

Thank you, this was enormously helpful. A note, the highlighting shows up even if you have autofill turned off in the Google Toolbar (at least with my version). Google Toolbar doesn't seem to honor the current Ecom_bleh names in all cases, so all-in-all, this "feature" seems more annoying than helpful.

So said e on Saturday 6 March, 2004 at 6:49PM GMT.

Comment 15

I had this problem. I disabled the field highlighting in the Google "more" tab. EOT

So said Kurt Suma on Wednesday 28 April, 2004 at 11:42PM GMT.

Comment 16

This "feature" is quite anoying especially if a client wants their font-color to be something similar to what they (Google) have set the background colour to be. I have noticed that although the background colour changes they did not take the time to change the fore-color so on some old pages the form fields look blank.

So said Timothy Haig-Smith on Thursday 6 May, 2004 at 9:48AM GMT.

Comment 17

Comments number 11, 12, 13 are exactly why this feature should be off by default, as stated above. How many people have wasted time trying to figure out why their fields are yellow? My guess is lots. We did the same thing at my company.

If the field were off by default and you had to manually turn it on, you would have read the words "Automatically highlight fields that AutoFill can fill" so you'd know.

So said Susie on Thursday 13 May, 2004 at 4:11PM GMT.

Comment 18

Maybe google should have the autofill have a user configured color with white being the default. Then everyone is happy. Or at least a msgbox along the lines of 'Google can auto fill the highlighted text boxes' with a 'Do not show my this again' option for the popup. That way everyone knows whats going on.

So said on Friday 14 May, 2004 at 3:26AM GMT.

Comment 19

Funny, I, too, have just searched for the answer to this question using my Google Toolbar. Now that I know what it is I'm just going to appreciate it. Thank you! And thank you Google for finding me the answer to the problem you caused! (hee hee)

So said Veronica on Monday 24 May, 2004 at 8:03PM GMT.

Comment 20

Thanks for helping me!

I spent a lot of time integrating Dada Mail into my http://www.venturejapan.com site and lo and behold whatever I did I could not affect the yellow background in the email entry field.

Yurns out the field name is 'email' and I run the Google toolbar.

If anyone has successfully changed the filed name (and of course the variable name in the CGI script) I would appreciate some feedback.

So said clare on Wednesday 9 June, 2004 at 10:18AM GMT.

Comment 21

I once had a pony too !

So said yellow_monkey_boi on Friday 9 July, 2004 at 6:34AM GMT.

Comment 22

It should really be turned off by default. I was panicking because I thought there was a problem with the CSS on my website. However, there is very little point in addressing this issue here, perhaps people could direct their comments towards Google? Why aren't I? I can't be arsed.
However, to be fair the Google toolbar is a very handy piece of software, and people shouldn't be put off by what is basically a minor aesthetic problem.

So said Tim on Wednesday 14 July, 2004 at 1:00AM GMT.

Comment 23

Please sir I know the answer !
The reason why the fields turn yellow is nothing to do with best parts of the page or most important.

The Google tool bar does something very useful indeed, it highlights fields which have been used before and therefore can autofill the fields in yellow.

The users above who say they use the toolbar and don't get the yellow highlighting have either :

1. Switched OFF the function
2. Switched off Auto Fill on their Browser.

Thank you - Thank you very much !

So said Dave Nash on Wednesday 28 July, 2004 at 3:37PM GMT.

Comment 24

He Shoots He Scores !!

So said Dave Nash on Wednesday 28 July, 2004 at 3:38PM GMT.

Comment 25

Hey, just posting this comment and seeing the form I'm currently in turn yellow is sorta one of the reasons I'm posting a response. I recently developed a website where *I* the DESIGNER wanted certain fields yellow and others to remain white, to give it a CSS, sorta website "skin" appeal. And yet the yellow that I chose is the exact color that the designer of htmldog choose, which is LIGHTER than the ugly Google fill (sorry). I have nothing against Google highlighting text boxes, but perhaps they should let the user choose what color they want the form fields, not to mention the ability to turn it off which I now found out is possible. Thanks! I had to refresh my webpage, and VOILA, yellow gone!

So said Rachel on Thursday 29 July, 2004 at 10:53PM GMT.

Comment 26

Thanks so much for this info. I was going insane!

So said steve on Wednesday 4 August, 2004 at 3:38AM GMT.

Comment 27

I am surpised knowone has sued them over this, technically this could be viewed as damaging other peoples reputations.

If i did not know it was the google tool bar and went to a site and saw ramdom form fields in bright yellow, i would consider them not professional and it might make the difference between doing business with them and not doing business.

How many other people think like this?

Basically their tool bar could serious be the factor in much lost business to companies through no fault of their own.
And what about all the lost time that designers waste when they get emails telling them some of their form feilds are yellow. The lost hours of work could have cost a small fortune when considering how many people had done this.

This is not a joke - whoever thought of this idea should be sacked as it could end up in a law suit.

So said Dean on Thursday 19 August, 2004 at 8:52PM GMT.

Comment 28

"I certainly don't want an automated tool messing up a carefully thought out design"

I know many designers do not want to let the users (or rather their user agents) decide how their site should look. This has resulted in unnecessary use of flash and other plagues of the web.
But really, this is what www is about: The guy creating the page may give _advice_ on how the page should be viewed, but in the end it's up to the user agent to decide how to render the page - as adviced, without stylesheets, with user-defined style sheet, through a speech synthetizer, ....

So said Jussi Kukkonen on Friday 27 August, 2004 at 4:06PM GMT.

Comment 29

Has anyone found a resolution to the color changes? I'm getting complaints from a customer because some customers can't read the form any more, due to the yellow background and white color text on the page.

HELP!

Thank you

So said Barry on Thursday 9 September, 2004 at 4:56PM GMT.

Comment 30

We have report systems with fields to search accounts by name, company, e-mail, phone. Then, autofill is inappropriate and distracting (and occasionally obscuring in color-coded areas), and the methods mentioned above for disabling the coloring will be put to good use.

So said Ken on Tuesday 28 September, 2004 at 2:41PM GMT.

Comment 31

The only way we got around this whole thing was to rename the form fields to be other names like emClient which is not making me happy. Also if the adjacent table cell is an auto fill word the next text box will also go that lovely shade of yellow. It would be great if they also changed the font color when they changed the background colour. If you are going to mess with something do it properly.

So said Timothy Haig-Smith on Wednesday 20 October, 2004 at 9:56AM GMT.

Comment 32

Can this be overridden by CSS? Specifically with:

input { background-color: white ! important}

So said Chris Weber on Friday 3 December, 2004 at 6:36PM GMT.

Comment 33

Duh, why don't I test it myself....

Yep it appears that bit of CSS fixed the problem for me. Finally a use for the !important tag.

So said Chris Weber on Friday 3 December, 2004 at 6:43PM GMT.

Comment 34

This issue is definitely one for a well thought out and cleverly planned execution.
It brings up the fact that as we progress into the future, further elements will be hijacked by user installed, third party software.

The issue of accessabilty vs. aesthetics will haunt us forever.
I guess that's job security.

For this particular issue, even if google had warned the end user during the install, who remembers everything about every product on their computer? Certainly not casual users. I had seen the auto fill highlight feature before and I didn't remember it, thus a search leading here.

I am temporarily resorting to the !important until I find a solution I am happy with.
Colors are very important to the art gallery owners I am working with.
If only browsers could include atrributes in the browser_agent such as 'speech', 'colorblind', 'useroverride' or other information we could use to change up the pages we offer, this might get sorted out better. Third party software that affected a page should be given a standard set of variables to alert webmasters, not so we can over-ride them but so we can at least be aware of and compensate/create alternatives for them.

Many users like to see visually appealing pages and do not want a vanilla internet.
Others of course, such as research oriented users, may want strict heirarchies and vanilla presentations more often.

Meanwhile Google should get its act together and at least:
1) Provide a 'message' in the google bar itself that lists what it is doing to a page.
2) Force the color attribute so that it is set to a readable color in contrast to the BG it sets.
3) Alternatively 'flash' a color on the bar to alert users to autofill on a page and give them a visual cue to see what information is being collected.

WARNING: If you read the google help page for autofill, you'll see they alert users (who bother to read it) that a webmaster could get credit card information from hidden fields if the user uses the auto fill. They say you can 'hold down shift' while completing a form to 'see what information is being collected'. If that is not a serious security issue...

I am going to go write to google now. ;)

So said Jesse on Friday 10 December, 2004 at 7:58AM GMT.

Comment 35

It looks lie google picks up on the field names as well as the td text next to that field describing what the user inputs soooooo

for the descriptions put things like n a m e instead of name and for the text field name put things like The3mail instead of email ... i find this outsmarts the toolbar ....

So said energy0m on Monday 13 December, 2004 at 8:48AM GMT.

Comment 36

I thought I was going crazy, 5 sodding hours I spent trying to sort this out and to make matters worse nobody else seemed to know what I was talking about. Why, oh why didn't I google the problem before; God knows. Alls well that ends well I suppose but I can think of better things to do with my time than trying to outsmart googlebar

So said Chris on Wednesday 15 December, 2004 at 10:24PM GMT.

Comment 37

In reponse to all those people who said that Google should tell you what it is doing, it does! When you download and install the toolbar, it then takes you to the Google Toolbar page where it explains what all the toolbar does, one of which is Auto-fill. But then as Guy said (comment #7) maybe I'm just one of those odd people who read the manual so you know what all it does when you get the thing.
I use the Googlebar and love it, but I do agree that the Auto-fill feature should be turned off by default. Then the people who get the toolbar because it does that are happy, and the rest of us who don't use or want or even know that particular feature exists are not confused and annoyed by having to turn it off.
But we all know that's not likely to happen because somewhere in someone's mind it's a good marketing scheme to have it turned on.

So said Rachel on Saturday 18 December, 2004 at 12:54AM GMT.

Comment 38

They should at least give web masters the ability to set the Higlight color to complement the rest of their site.

We currently have a blue/light-blue, gray,dark-gray site and the highlight yellow just deteriorates the design. I would love to be able to set the fields to a color that is still off from the rest, but follows the same theme.

A line inclusion on the page, "This is the color of google autofill for this page"

So said Kit on Monday 10 January, 2005 at 11:16PM GMT.

Comment 39

HEY EVERYBODY: Let's all thank Chris Weber for finding the SOLUTION:
see Comments number 32 and 33:

Comment 32:
Can this be overridden by CSS? Specifically with:

input { background-color: white ! important}

So said Chris Weber on Friday 3 December, 2004 at 6:36PM GMT.

Comment 33:

Duh, why don't I test it myself....

Yep it appears that bit of CSS fixed the problem for me. Finally a use for the !important tag.

So said Chris Weber on Friday 3 December, 2004 at 6:43PM GMT.

So said Yoss on Wednesday 12 January, 2005 at 2:50PM GMT.

Comment 40

The best solution, in my opinion, is in the blog entry itself:

"I think the best and most simple method is to just use names that the Google Toolbar won't recognise."

So, not to use name="name" or name="search" or name="email" etc. As an example, in a contact form I've started using name="cname", name="cemail" etc. which the GoogleToolbar doesn't pick up.

So said Patrick on Wednesday 12 January, 2005 at 2:57PM GMT.

Comment 41

HI. This is a VERY negative feature when using a dark background and a white (or even yellow!) text on your form. I am using a white text on a blue background and therefore when filling in the form you CANNOT SEE THE TEXT!

Laurie

So said Laurie Cope on Monday 17 January, 2005 at 9:35AM GMT.

Comment 42

Using other field names can be a pain especially if your form interacts with a Payment gateway which requires certain field names.

So said Lisa Whitsell on Tuesday 18 January, 2005 at 8:56PM GMT.

Comment 43

Finally! I've been wondering about this for months, and couldn't find anything online about it until now. I developed an E-Commerce solution and couldn't figure out why certain fields were mysteriosly yellow, and others weren't. And it only happened in Internet Explorer, and only on my machine. Drove me crazy. I knew it was something to do with field names, because when I changed the field names the yellow background disappeared. I thought it was IE's AutoComplete feature, but now I can see for myself that it's the Google toolbar. The Google toolbar feature is helpful, but I think the default setting should be to leave background settings alone. If the user wants to see Google toolbar-enabled features, they can set its configuration themselves. The Google toolbar is great, but it should not assume it's the most important piece of software on the user's computer and start taking over. Let the user decide what's important.

So said Clifford Barney on Friday 21 January, 2005 at 3:34PM GMT.

Comment 44

thanks to Chris for the suggestion about CSS. My only question was why using the style tag inside an input tag and including the background-color:white ! important did not work. The internal style tag should over-write the css that is included.

I welcome comments if anyone knows why.

Thanks,
Dina

So said Dina on Wednesday 26 January, 2005 at 7:38PM GMT.

Comment 45

Well done Chris re the CSS suggestion.

I've ignored the yellow highlight to date but today was forced into finding a way around it when developing online forms for an intranet.

A Google search produced this page and an easy solution.

Thanks again
Marty

So said Marty Young on Friday 28 January, 2005 at 4:45AM GMT.

Comment 46

Thank god I found this page! I don't know how long I've been trying to figure out these stupid yellow forms! A friend finally asked if I was using google toolbar, with that I managed to find this page.

The css fix (! important) worked like a charm! You rock!

So said Savage on Sunday 30 January, 2005 at 5:26AM GMT.

Comment 47

Thanks for the dialogue. Google is both responsible for this design problem, but also for the stellar indexing of this issue that allowed us all to find the answer... Ah, the yin and yang that is the internet!

So said on Tuesday 8 February, 2005 at 3:22PM GMT.

Comment 48

I turn my Google Auto-fill off, and I have instructions on my webpages that tell other users how to turn off the function should they be "seeing yellow"....heh.

But for a while I was re-naming my fields. Writing "name" in Japanese in the field name worked for me, and typing "E~mail" instead of E-mail" took it off the email feature. Since my sites are veiwed by a very select audience, I ran a poll and it seems that 98% of my viewers (who have the Google toolbar) HATE that yellow thing that Google does, and the other 2% were indifferent, they didn't care either way.

So said Ginhoshi on Thursday 10 February, 2005 at 4:33PM GMT.

Comment 49

Coming it from a slightly different perspective: As both a web designer and frequent user of Google autofill, I want to ensure that my forms autofill correctly - leaving aside whether the user has let the toolbar highlight them or not.

Not an issue, all worked fine until I started using Firefox for personal browsing, and when designing forms, tested them both on IE+google autofill and Firefox+mozilla autofill plugin. The latter uses the ecommerce naming convention correctly and Google does not. For example Goole toolbar will autofill the field named Ecom_BillTo_Postal_Name_First with the post (zip) code.

It is therefore a challenge to find field names that autofill correctly in both. Does anyone have experience of this? I have been searching without success for an equivalence table such that form fields can be chosen that will work in both.

So said David Taylor on Tuesday 15 February, 2005 at 10:40AM GMT.

Comment 50

Back and forth we go, arguing about yellow fields, autofill, users and developers. Well, I am a developer, I do not care about the color. I have known about the google auto fill for a long time. I dont care if users have it on or off. I just want an easy way to have a field not auto fill because google is filling it incorrectly. I have the same code with the same names in another place and it works fine, grrrrrr. I have changed the tb name, the label in front of it, text all around it, but still it autofills incorrectly. JUST TELL ME HOW TO TURN IT OFF FOR EVERYONE AT LEAST FOR ONE FIELD, I DO NOT WANT USERS (YES I AM THINKING OF THE USERS HERE) TO HAVE TO CLEAR OUT A TB TO ENTER THE CORRECT INFORMATION.

So said TJ on Thursday 24 February, 2005 at 10:01PM GMT.

Comment 51

P.S. The reason that Developers hate this so much is it is one more thing that we have to do because users are not smart enough to follow directions. That is why we spend hours and hours putting in form validators so that we can assure users do what they are supposed to do. Now they cant even fill in their own form, how else do we need to hold your hand.

So said TJ on Thursday 24 February, 2005 at 10:21PM GMT.

Comment 52

Thanks for the page. 4 hours experimenting with possible causes of the yellow text fields! Your page ended the challenge.

So said Joe on Saturday 5 March, 2005 at 6:26PM GMT.

Comment 53

Right, very helpful! Thank you for your article.

So said floook on Thursday 10 March, 2005 at 12:40PM GMT.

Comment 54

Is there any means for me to suggest the colour to use?

The particular shade of yellow clashes with my pages.

So said nemo on Thursday 24 March, 2005 at 4:27PM GMT.

Comment 55

I dont know if i understand this issue correctly, but sure enough when i select a field on this website, that field's background turns yellow. I do however use firefox on a mac, without google's toolbar... so i'm pretty sure it's not that!

So said Dan Morris on Sunday 27 March, 2005 at 12:57AM GMT.

Comment 56

I can't believe nobody has mentioned this, but the yellow backgrounds confused ME at first because I assumed that yellow signified REQUIRED fields, since required fields are such a common feature of so many forms, and a feature which is quite naturally denoted by different styling.

As a user, I get annoyed when I miss a "required field" because I didn't see it, and have to be later reminded by a bright red warning to fill it in. In my opinion, anyting that interferes with my ability to make out which fields are required is bad, and the seemingly random yellow backgrounds attract so much attention to themselves, that they do just that.

Another thing: Comment #42 by Patrick works for some forms, but not for mine.

Even if I change the name="name" attribute in my form to name="cname", the text box remains yellow, unless I also change the field LABEL in the adjacent table cell. The Google toolbar seems to pick up on any clue it can, including sniffing the adjacent labels, so unfortunately I would need to also change the LABEL for the text box to from Name: to cName: which would be unacceptably confusing to users. The toolbar even susses out what's going on when I change the label to "Your Name:" - still yellow.

I'll have to go with the option of last resort: background:white !important

So said david clark on Saturday 2 April, 2005 at 6:15AM GMT.

Comment 57

Another sneaky thing is that if you have a tabled cell next to the field that is like First Name or Surname the adjacent field text box will also turn yellow!
What I ended up doing was putting hidden tags between the table adjacent table cells with the description of the field like First Name: became name Fir<!-- --> and I re named the fields to FirName.

So said Timothy Haig-Smith on Tuesday 19 April, 2005 at 2:32PM GMT.

Comment 58

Thanks, I finally got rid of it!

So said Mark on Tuesday 26 April, 2005 at 11:53AM GMT.

Comment 59

I also had this problem and spent quite a lot of time trying to figure it out, though unsuccessfuly. I saw it in some other computer, and then - a third computer did not have those fields highlighted. This being my design did not make sense and I was thinking about the computer configuration or the browser being buggy? I could not be sure. This helped a lot. I doubt, I would figure it out on my own. Thank you.

So said Voy on Tuesday 3 May, 2005 at 9:33PM GMT.

Comment 60

This thread has gone on for more than a year now. Seems *everyone* here should be writing Google. In fact, referring them to this page may be the simplest way to do it, because everything's covered. To fill in a niche or two...

...when the yellow fields appeared, my first thoughts were these:
1. Mistakenly thought a Microsoft automatic update now highlighted required fields.
2. After finding no required-field matchups, I thought maybe a Microsoft automatic update had goofed.
3. The yellow looks horrid, and I was concerned my visitors would think it was my idea. (Not to mention that I hated the thought of having to live with it.)
4. Thought something was broken on my system.

As with others here, the investigation has amounted to several hours, until I, too, finally thought to do a search. The time lost by us small developers, and even by users, is not insignificant, and Dean's comment (#27) about seeming to show poor creative judgement (or even technical awareness regarding this issue?) is also valid.

My further thoughts are:

a) I see NO real function to highlighting these fields -- if the user wants to autofill, it's all or nothing, and the unfilled ones will be apparent. And, note that my first guess as to their meaning was incorrect. I can't imagine what sort of unprompted usability testing might have lead to this highlighting.

b) As with everything else HTML, the user's desires and setting should be respected. I wouldn't agree with choosing field names that intentionally disable Autofill. Except that I'm sure many Google Toolbar users don't know what causes the highlights (at least until they've used Autofill several times and noticed the correlation), so, again, what's the purpose?

c) Yes, it would be nice if a site could at least specify the highlight color, not have to disable it entirely. But we shouldn't have to. Highlighting should be OFF by default, and should be disabled when Autofill is disabled.

d) The fact that the highlighting doesn't disappear when Autofill is turned off suggests that this whole thing is a marketing ploy, to make users investigate. During my investigation, I found myself deciding to try Autofill for awhile. However, if this is Google's sole justification, it's an underhanded marketing technique, hardly compensating for all the negatives, and is one of the few things Google that leaves a sour taste in my mouth.

e) If Google Toolbar will autofill hidden fields, with or without password, that strikes me as a DEFINITE privacy/security risk. Not just credit info. For example, there may be forms where I give my city, but don't want to give my name or phone number. Maybe I misunderstood the post above. Just in case, I'm disabling autofill now.

So said Randall on Saturday 7 May, 2005 at 8:44PM GMT.

Comment 61

Just a quick note to say that the suggestion to change the field name does not work - you need to change any related text too: I changed an input from name="email" to name="lkjhl" and it was still yellow. It wasn't until I changed the text in the adjacent table cell from "E-mail address" to "Quagmire" that the input changed to a white background. Talk about making life difficult!

So said Ian on Monday 23 May, 2005 at 6:25PM GMT.

Comment 62

Well done Chris Weber, and thank-you CSS for the ! important tag.

So said Nick on Friday 27 May, 2005 at 3:20PM GMT.

Comment 63

Just in case you missed it, check out #10 above. The 2 links tell you everything you need to know about how to disable it completely or define a custom color.

So said Neil on Friday 3 June, 2005 at 5:24PM GMT.

Comment 64

What's really annoying is when the Autofill gets the fields wrong. The autofill ignores my Telephone field, and fills in the number in the secondary (invoice) address' Telephone field, further down in the form. I've tried renaming, naming correctly, etc nothing works. AAAARRGGG!!!

So said Soni on Tuesday 28 June, 2005 at 10:52AM GMT.

Comment 65

This problem has been boggling my mind for a couple of months now. I always develop my pages for Firefox, but test them in MSIE, Netscape and Opera as well. The mysterious yellow text boxes has been pissing me off for some time now, and I had actually given up trying to resolve the problem. Sure enough, as soon as you stop searching for the answers, they will find you.

So said Psilokan on Sunday 10 July, 2005 at 3:59PM GMT.

Comment 66

Hi. My son lovingly installed the Google toolbar on my computer. I was just learning how to design my first Web site from scratch. Like everybody else I spent hours trying to figure out why some input boxes were turning yellow no matter what background colour I assigned them. In the end I thought I had a bug in my computer or the dreamweaver program. So I decided to make all my input boxes with a yellow background. Eventually I discovered the Google autofill was the culprit but decided to leave all the input boxes the yellow colour so as not to confuse those who visited my site who didn't know why certain input boxes were turning yellow. I'd even designed my forms so the colours would all match. I eventually came across the Jenseng web site with the article Outsmarting the Google toolbar and have been experimenting on a spare Web site. Thanks sooo much for that information.

So said Shirley on Wednesday 31 August, 2005 at 9:11PM GMT.

Comment 67

NOT just a Google/IE problem. FIREFOX Autofill too.

The Autofill extension for Firefox has the same {highlightColor: pee-yellow} option that may be turned on/off.

I like Chris's CSS {backgroundcolor:()!important} declaration solution. THX for posting this topic Dawg -- it was driving me nuts too! ;>)

So said Bruce on Friday 14 October, 2005 at 9:14PM GMT.

Comment 68

what about the ugly blue select / highlight color on the drop down forms ( not the background color ) that I cannot get rid of? Does anyone have a solution that does not involve a graphic? thanks

So said juliet on Friday 21 October, 2005 at 3:42PM GMT.

Comment 69

Thank you very much Chris Weber for the valuable information regarding CSS. As Yoss mentioned the !important tag came in very handy.

I would also like to congratulate and thank all the smart folks that take their time to help and give advise in this wonderfull group.

Best regards to all of you !!

So said Carlos on Wednesday 26 October, 2005 at 6:00PM GMT.

Comment 70

I HATE the yellow thing! Google needs to back off already.

So said Yellow Box on Thursday 27 October, 2005 at 8:48AM GMT.

Comment 71

Thank you very Much!!
I have been working on a site in CSS and the yellow fields were driving me nuts..
I thought I had mad a mistake somewere :).

So said Greg on Saturday 26 November, 2005 at 5:53AM GMT.

Comment 72

Has google yet release a fix or when a fix will be implemented?

So said Greg on Saturday 26 November, 2005 at 5:55AM GMT.

Comment 73

owch
my text color in the box is white with a normal blue background

I got complained at a lot about my mistake and how I have messed something up

I see no problems on my side so maybe the auto highlight is not a good idea or it should at least check the text color aswell !!!!!!!!

So said Paul on Tuesday 6 December, 2005 at 11:22AM GMT.

Comment 74

You are a GOD!!!!! haha
my boyfriend and I were slowly going insane over this- those stupid yellow form fields were totally messing with my preeeettyyy colour scheme. No more. Pink form fields for everybody!!! (who doesn't have google toolbar that is :-P)
P.S. Google Toolbar is EVIL!!!
P.P.S. I see that even though we have disabled evil toolbar thingy, I see you have strategically highlighted the "name" and "email" fields here a lovely shade of yellow.... nice.

So said Mel on Thursday 8 December, 2005 at 3:14AM GMT.

Comment 75

yeah !important helped, thank you guys
i had exaclty same matter my design is in blue color and text color must be white, Autofill changed bg to yellow and all new users was confused what they are writing into field, i'm sure i helped them a lot.

thanx again

So said miob on Tuesday 13 December, 2005 at 5:36PM GMT.

Comment 76

thanks a lot dude! your post really really helped me out...

So said k hein on Wednesday 14 December, 2005 at 1:35PM GMT.

Comment 77

input { background-color: white ! important}

I tried it, it failed to change anything in IE6 & Firefox 1.5 for Windows with the Google bar installed. I have the style in an external CSS file. and tried it as an inline style. Both failed to get rid of the problem. I disabled the Google Autofill hightlight option to confirm that yes it would go away after doing that, so how is anyone achieving success using CSS to override the Google Autofill option?

So said Logan Jaeren on Thursday 12 January, 2006 at 10:03PM GMT.

Comment 78

I think it's important to note that we can't always have control over the naming convention of form inputs. For example, in a struts environment, you might be using the struts.apache.org/tags-html-el tag library to generate form inputs based on properties provided by some business layer objects. Or, as others pointed out, you may need certain input names to work with a payment gateway.

Another important thing to note is that not all forms would make sense to have auto fill enabled features. For example, on a form where you are always entering your own data you may want auto fill. But on a form that is part of a web application where the user may be managing other "users", you would not. That is, the "Name" may not mean the user's own name.

Personally, I would like to see some standardized method where instead of defining the style of the input, the google toolbar instead applied a class name to the input, and then internally specified the style like a client side stylesheet. And it would be nice if the styles for that class could be overwritten. For example, suppose those fields that were recognized as autofill fields were given the class name:

Ecom_Autofill

Then developers could have some style defined that would overwrite google's style of bright yellow background.

Or, if there was a way to specify that field is NOT intended to be automatically completed by wallet applications. For example, if an input (or select) was nested within some container that had a class name:

Ecom_Autofill_Ignore

For example:

<form class="Ecom_Autofill_Ignore" action="">
<input name="name">
</form>

So said Peter Foti on Thursday 19 January, 2006 at 8:56PM GMT.

Comment 79

Wow. Thanks for the post and thank Chris for the input !important suggestion. Fortunately I was only 20 minutes into my own testing.

That yellow really makes a form look alarming rather than friendly. We are trying to massage visitors into signing up and that yellow was not helping at all. I have the Google toolbar installed on our Windows testbed for SEO purposes and had no idea that it was up to this.

The irony that we find the remedy ranked number three on a search in Google.

Yellow text fields. Internet explorer. Form fields. Yellow text fields. Internet explorer. Form fields. Input. To help this page come up number one.

So said LVV Technology on Wednesday 15 February, 2006 at 12:24AM GMT.

Comment 80

Why not just turn off the highlighting?

Options -> autofill settings uncheck the box at the bottom: Highlight fields on web pages that autofill can update in yellow.

worked for me

So said Clyde on Tuesday 28 February, 2006 at 12:03AM GMT.

Comment 81

Thanks so much. I tripped over this with Firefox's Google toolbar and was stumped. Fortunately, I found the answer here after only puzzling for 10 minutes or so. Bravo!

So said Kate on Thursday 23 March, 2006 at 7:06PM GMT.

Comment 82

I have tried adding:

input { background-color: white ! important} (see Chris's comment # 32)

into the css code, and the google toolbar is still overriding my css.... anyone know why??

thanks!

So said Ashley on Friday 31 March, 2006 at 10:46PM GMT.

Comment 83

chris's solved my problem good work chiris

So said elyas on Wednesday 12 April, 2006 at 1:38AM GMT.

Comment 84

The Google Toolbar Auto Fill and Auto Highlight feature operate on a simple principal. They scan the html document untill it finds a form tag it then begins looking for input fields with label tags similar to ones attached to previous forms viewed in your browser. Google Toolbar then highlights any relavant fields based on the label property of that field. However the label property is sometimes omitted from the code by inexperienced web developer's. To compensate for poor design methods the Google Toolbar also takes into consideration other criteria such as element names i.e the attribute name="myTextfield" is compared against any other forms you have filled out previously. Any matches result in the toolbar auto highlight function to be triggered. This should sum up any questions about mysterious yellow form fields. Cheers

Read more about web development on my web development blog http://www.timmatheson.com
Tim Matheson - Web Development Blog

So said Tim Matheson on Sunday 16 April, 2006 at 1:43AM GMT.

Comment 85

Thanks for the tip!!!

So said Scott Bohler on Monday 17 April, 2006 at 3:23PM GMT.

Comment 86

I have tried to turn off auto fill and shading of form fields inside the google toolbar but nothing seems to work. Although I like the google toolbar and have recomended it to many of my clients, I am now forced to tell clients to not use the toolbar because it autofills wrong fields is some forms and you have to go threw and delete each field every time you use a form, plus that damm yellow background that will not go away even after turning it off.

So said Rick F McBride on Tuesday 18 April, 2006 at 2:57PM GMT.

Comment 87

Two issues.

the css fix does work but screws up the look of standard buttons as they are input fields.
You also have to do it for textareas and select boxes.

Its fine for a person to disable it but try explaining that to 100s of customers or worse potential customers. Many web users will not know what the feature is for, doesn't know why it is like it is. Like I they will install google toolbar and then just see yellow fields with no idea why. The techies will search for a solution, at best visitors will ignore it and at worst be put off by it. If goggle are going to have this feature then it should as others say be disabled or white by default.

If people want to use it that much they will enable it (I bet about 99% don't).

its not a case of designers/developers trying to prevent others doing things its about stopping outside influcences breaking your site or losing you business. Its a bit like BT suddenly intercepting all your calls and saying. If your call is about x press 1, if its about y press2 .....

Finally. I think this is a big security issue.

Go on any public pc, go to a site and lo and behold it shows you all the fields that it can enter for you.... nice and easy to hack.... well done google.

So said Duncan Berriman on Sunday 23 April, 2006 at 11:05PM GMT.

Comment 88

Fortunately all my form fields have a style (bodytext) so the following works and does not mess with your buttons.

input.bodytext { background-color: white ! important}
select { background-color: white ! important}
textarea { background-color: white ! important}

So said Duncan Berriman on Sunday 23 April, 2006 at 11:17PM GMT.

Comment 89

{text1}, {text2}, {text3}, {text4}, {text5}

So said Alex on Friday 28 April, 2006 at 10:00PM GMT.

Comment 90

I had just starting trying to figure out why this was happening.
Did a google search and found the answer to the problem that they're
causing.............????!!

So said jaygkay on Wednesday 24 May, 2006 at 6:44PM GMT.

Comment 91

Used the script on http://code.jenseng.com/google/ and washed the yellow away!!

So said jaygkay on Sunday 28 May, 2006 at 10:00PM GMT.

Comment 92

oh my God..thank you soo much. this drove me to drinking. i have used everything i know...come to find out it F****** Google. disabled it and everything works fine.

So said kofi on Monday 5 June, 2006 at 9:50PM GMT.

Comment 93

If google wants to change the BACKGROUND COLOR of a field to yellow, they should also change the text color to black. Cause if you CSS an input box to a black background with white text, when google changes the background color to white it's totally unreadable.

So said aubrey on Wednesday 14 June, 2006 at 1:26PM GMT.

Comment 94

Amazing how a thread this old can still be relevant today.

My login form looked great in 4 different verions of IE, 3 earlier versions of Netscape, FireFox and Opera. No yellow form fields. However, when I ran my script under Netscape 8.1, there were the yellow form fields. :-(

Luckily it only took me a few hours to find this post.

I do not have Google Toolbar installed on any of my browsers, so this was not my problem. Yes, NS 8.1 has Auto-Fill :-(

My point being, it is not just the Google Toolbar, but also any browser that has Auto-Fill function. Does anyone know how to turn it off in NS 8.1??

I applied the CSS code "input { background-color: white ! important}" and it worked great!

Thank you so much

So said /louise/ on Sunday 18 June, 2006 at 9:25AM GMT.

Comment 95

P.S. The reason that Developers hate this so much is it is one more thing that we have to do because users are not smart enough to follow directions. That is why we spend hours and hours putting in form validators so that we can assure users do what they are supposed to do. Now they cant even fill in their own form, how else do we need to hold your hand.

Well said! My clients started flipping out about it and wanted all the fields to highlight. I normally work with flash, so html forms aren't my strongsuit.

Found this page way after I gave up and just created the form in Flash where I have total control over it.

So said weis on Tuesday 18 July, 2006 at 5:03PM GMT.

Comment 96

Due to spam, I'm afraid it's time to shut off comments on this post. I'm glad it appears to have helped!

So said Patrick on Thursday 10 August, 2006 at 11:34PM GMT.

See Also

^ Top

SiteGround: Fast, reliable, recommended hosting.