Styling Google Autofill Form Fields

input[type='text'] { background: #FFFFFF !important; }

What is Google Autofill?

The Google AutoFill feature allows you to store personal information about yourself (Name, Address, eMail and Phone Number as long as your form conforms to Electronic Commerce Modeling Language standard so that it can be automatically inserted into fields on website forms. The information you enter can be used on any web form. By default if a user enables google Autofill feature the relevant form fields are styled with a yellow background.

While the feature is extremely helpful, the yellow background may not fit into the overall color scheme of your website.

Killing the Yellow Backgrounds

Using the Kill Google Autofill Script Extension you could get rid of the yellow backgrounds. This however does not kill the actual Autofill functionality, The auto fill feature still works however there is no visual indication of what Google's toolbar will fill up.

The extension interface to add the script can be accessed from the Commands dropdown menu, once a text field / list field is added to the document.

Just click Add to add the script

Styling the Form

To distinguish the Autofill fields from the Non-Autofill fields we need to style the form. We do this by redefining the input and select tags.

input, select {
background: #E0DFE3;
border: 1px solid #333333;
font-size: 75%;
width: 150px;
}

Now to distinguish the fields that can be filled with the Autofill option, create a class with a different style. In this case I have called the class .google and declared its background color.

.google {
background: #899191;
}

Finally adding a note to inform the user is all that is required to complete your custom styled Google Autofill form.

Since Google Toolbar is available only for Internet Explorer, we can hide the custom style from other browsers using Internet Explorer Conditional Statements.

<!--[if IE]>
<style>
.google {
background: #899191;
}
</style>
<![endif]-->

However this still leaves the message to be hidden from other browsers. Just set the display property of the message to "none'. and set it to "block" within the conditional statements. Here is the final form.

<style type="text/css">
<!--
body {
background: #FBFBFC;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
label {
font-size: 80%;
color: #333333;
}
input, select {
background: #E0DFE3;
border: 1px solid #333333;
font-size: 75%;
width: 150px;
}
table {
background: #C5C7CF;
border: 1px solid #003C74;
}
.note {
display:none;
}
-->
</style>
<!--[if IE]>
<style>
.google {
background: #899191;
}
.note {
font-size: 69%;
background: #899191;
display: block;
}
</style>
<![endif]-->