Preventing the unsightly yellow highlighting caused by AutoFill

I was asked to prevent the AutoFill feature on the Google Toolbar from highlighting the fields on our website's registration page with yellow. It can be easily switched off, but many users will be unaware of this.

We found one approach to the problem on the Web that involved using JavaScript—far from ideal, and it apparently didn't prevent highlighting of drop down lists. As it turns out, there is an easier way to resolve the issue.

The key is to understand how AutoFill works. It identifies the fields that are highlighted by searching for keywords such as name and email in the source HTML. By eliminating these keywords without changing the appearance of the page we can prevent AutoFill from changing the colour of the input controls on forms.

A simple example of a form with highlighted fields is shown below.

<form action="/" method="post">
  <table>
    <tr>
      <td>Name:</td>
      <td><input type="text" name="name" /></td>
    </tr>
    <tr>
      <td>Email:</td>
      <td><input type="text" name="email" /></td>
    </tr>
  </table>
  <input type="submit" value="Submit" />
</form>

To prevent the yellow highlighting, we must do the following:

• For displayed text, break the keywords using empty span tags.
• For keywords in the HTML not displayed to the user, such as attributes, rename them.

These changes fool AutoFill so that the input controls are rendered without the yellow highlighting.

<form action="/" method="post">
  <table>
    <tr>
      <td>Na<span />me:</td>
      <td><input type="text" name="na" /></td>
    </tr>
    <tr>
      <td>Em<span />ail:</td>
      <td><input type="text" name="em" /></td>
    </tr>
  </table>
  <input type="submit" value="Submit" />
</form>