UPDATE The code snippet given in this post is not functioning in Mozilla Firefox. Please follow the link to get the cross-browser version of the JavaScript code: Cross-Browser solution for correcting mysterious yellow input fields caused by Google Toolbar's AutoFill feature

Browsers with Google Toolbar AutoFill function enabled, display a yellow background on some of the form input elements. Some users or programmers may question if Microsoft has implemented new standards to use yellow highlighted form input elements. 

Browsers with Google Toolbar AutoFill function enabled, display a yellow background on some of the form input elements

This is caused by Google Toolbar installed and its AutoFill option enabled.

The AutoFill tab in Toolbar Options enables you to automatically complete forms on the web. Enter your information and it's stored securely on your own computer. When you see yellow-colored form fields on web pages, you can choose to have Google complete the form for you with the information you've entered.

AutoFill stores personal data where only you can access it on your own computer. And your credit card number is encrypted and protected by a password you set. None of this information is ever sent to Google. In the Toolbar, the AutoFill button is enabled when you visit a page with fields that AutoFill can fill. Otherwise, the button in the Toolbar appears gray.

To complete forms on sites that you trust, just click the enabled AutoFill button. If you haven't entered any AutoFill information that applies to the current page, AutoFill displays the AutoFill tab page in the Toolbar Options window. Once you've entered your information on that page, clicking the AutoFill button will automatically complete a form.

The yellow input fields can be quite confusing. Most users who have the Google Toolbar installed do not use AutoFill feature and they do not how to disable it. While they are filling a form containing yellow input fields, they might think that these yellow fields are the only required fields to fill before submitting the form.

The toolbar applies the style while the document is loading. After the document loads completely we can undo the style changes applied by the toolbar by using a simple JavaScript.

Place the following code into the head section of your document:

<script language="JavaScript" type="text/javascript">
    if(window.attachEvent)window.attachEvent("onload",resetStyles);

    function resetStyles()
    {
        resetStyle('input');
        resetStyle('select');
    }

    function resetStyle(inputType)
    {
        var count=document.getElementsByTagName(inputType);
        for(var i=0;i<count.length;i++)
        {
            count[i].attachEvent('onpropertychange',resetBC);
            count[i].style.backgroundColor='';
        }
    }

    function resetBC()
    {
        if(event.srcElement.style.backgroundColor!='')
            event.srcElement.style.backgroundColor='';
    }
</script>

The code places an event listener on every input and select element in the document so that if background color of any element is modified, it will instantly change it to the background color that you have defined in our declaration or external stylesheet.

Add comment