What is the Issue?
If you're a web developer you may have faced this problem at one time or another. If you haven't yet, you most likely will see it at some point. It's the mysterious yellow input fields. On a form, certain textfields inexplicably turn yellow when viewed in Internet Explorer. This is caused by having the Google Toolbar installed and the AutoFill option enabled. AutoFill allows Google to remember your personal information so that it can automatically populate form fields for you, if you desire. Fields such as name, address and phone will all turn yellow if AutoFill is turned on (which is the default setting). If you're anything like me, you probably like having a certain level of control over how things are displayed on your pages and don't like it when a program arbitrarily changes that.
How does this affect me? I use Mozilla.
Given that most people surfing the web use Internet Explorer and many of them use the Google Toolbar or a clone thereof, this affects almost anyone who designs a web page. The reality is that most users who have the toolbar installed do not actively use AutoFill, nor do they know how to disable it. When they come to your site and see that on some forms certain fields are yellow, it's not surprising that they can be confused. "Are those the only fields that are required?" "Why are some of these fields yellow when it obviously doesn't go with this color scheme?" In all likelihood it will never occur to them that the issue is their browser, not your site.
Can't I just use a stylesheet or inline styles?
You can, but they will be overridden, whether you specify them inline or externally. Therein lies the problem. Here's how styles are applied in Internet Explorer as far as AutoFill is concerned:
- Styles may be set in the following places:
- External stylesheets
- Embedded stylesheets (via <style> tags)
- Inline styles
- All of the styles above can be overridden by the Google Toolbar
Then what's the fix?
While there is a purely CSS workaround, the recommended solution uses JavaScript. All styles outlined above are applied to the page while the document is loading. Once it has loaded completely, we can then undo whatever damage the toolbar has done. What we need, though, is a fix that will work the same regardless of what is or is not in the stylesheet. In other words, if we change our background color for text inputs in the stylesheet from light blue to light gray, our JavaScript fix should not need tweaking.
At the time of writing, the way the Google Toolbar changes the color of a form element is by explicitly adding background-color: #ffffa0 to its style property. All we need to do is remove it by adding the following code to our document head:
| Code |
<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 = ""; }//--> </script> |
And that's it. Only Internet Explorer will execute the code, although we'd be fine even if all browsers did. The code places an event listener on every <input> and <select> in the document tree so that if its inline background color is modified, it will instantly reset itself. This means the browser will once again use whatever rules we have defined in our <style> declaration or external stylesheet. An added bonus is the fact that because we used the attachEvent method, this script will coexist with other scripts that are set to run using the window.onload event handler.
If you want to keep things simple, you can just include a JavaScript file containing the code above. Then all you need is <script type="text/javascript" xsrc="googlefix.js"></script> somewhere in your document head.
Additional Notes
A compromise everyone can live with
For the people that actually use AutoFill, this can be a problem, because it will no longer be apparent that they can use the feature on your site. There are two easy workarounds that still make it apparent that they can use AutoFill without sacrificing your design. The first one is to assign a color of your choice to the AutoFill fields depending on your color scheme (simply modify the script above to assign a new color value in every instance where the toolbar has changed it). The other would be to style all inputs the same but provide an explanatory note visible only to those with AutoFill enabled.
The ideal solution would include both of the above approaches for maximum ease of use. A side benefit of this is that you help educate those people who have AutoFill enabled but don't know what it is and who wonder why so many sites have yellow input fields. The following code illustrates how:
| Code |
<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 = "#a0d0ff";
/* color of choice for AutoFill */
document.all['googleblurb'].style.display = "block"; } }//--> </script>
|
and include this directly above your form:
<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 xhref="http://toolbar.google.com/autofill_help.html" title="AutoFill Help Page">Learn more</a>. </div>
|
As long as you aren't setting any inline styles for your inputs, only people with the AutoFill feature enabled on the toolbar will see the note and the re-styled inputs (and even then only if the page actually has fields that AutoFill can complete). Special thanks to Dean Owen for additional insights on this subject.
Pure CSS
I should point out that making a declaration !important in your stylesheet will also override the AutoFill styles. However, it does not allow to specifically target AutoFill fields (say, if you want them to be pale blue and other ones gray), or to have content strictly for AutoFill users. If you do not plan on implementing the compromise above, this may be a simpler solution for your needs.