Mysterious Yellow Form Fields – Ryan Chapin's Website

If you have ever noticed mysterious yellow form fields on websites, or in my case, had a client call and wonder why there are random yellow form fields on a site that you designed when you know you didn’t design it that way, this article should help.

It’s the Google Tool bar in IE, and there is an elegant fix for it that allows you to either disable completely the highlighted fields or customize them and display a special message to Google Toolbar users.

I discovered this fix on Jon Jensen’s blog. Click here for Jon’s full explaination and fix.

For those who just want the fix without the "blah, blah, blah", here it is:

Add the following javascript to the <head> tag of your HTML document:

<script type="text/javascript"><!--
  if(window.attachEvent)
    window.attachEvent("onload",setListeners);
  
  function setListeners(){
    inputList = document.getElementsByTagName("INPUT");
    for(i=0;i<inputList.length;i++){
      inputList[i].attachEvent("onpropertychange",restoreStyles);
      inputList[i].style.backgroundColor = "";
    }
    selectList = document.getElementsByTagName("SELECT");
    for(i=0;i<selectList.length;i++){
      selectList[i].attachEvent("onpropertychange",restoreStyles);
      selectList[i].style.backgroundColor = "";
    }
  }

  function restoreStyles(){
    if(event.srcElement.style.backgroundColor != "" && event.srcElement.style.backgroundColor != "#a0d0ff"){
      event.srcElement.style.backgroundColor = "#CHANGE_TO_CUSTOM_COLOR"; /* color of choice for AutoFill */
      document.all['googleblurb'].style.display = "block";
    }
  }//-->
</script>

Change the background color setting in the 5th to the last line where it says #CHANGE_TO_CUSTOM_COLOR" to a color that you would like to use instead of the default Google Toolbar bright yellow.
Add the following above your form, which will render only if the user has the Google Toolbar installed
<div id="googleblurb" style="display:none;">
You can use the AutoFill function on the Google toolbar to fill out
the highlighted fields on this form.
<a href="http://toolbar.google.com/autofill_help.html"
title="AutoFill Help Page">Learn more</a>.
</div>
Done! Now when the page loads for a user with the Google Toolbar, they’ll see the highlighted forms in a custom color and a custom message explaining to them why they are highlighted.

Leave a Reply Cancel reply