Yellow Forms in Firefox

Introduction

Firefox users may notice that on some websites, the background to some form fields appears yellow. There is no functionality issue with the forms, however especially as a website developer this can be a little unsightly. The forms look something like this:

One field
Yellow field
Another field
One more field

Reason for yellow fields

As a web developer it can be frustrating to find that some fields in forms on your pages do not display as you intend them to, especially when you have explicitly set the style using CSS. The reason why some form fields have a yellow background is simply because of the Google Toolbar, and it's auto fill function. If the Google Toolbar thinks it can fill in a field using presaved data, then it will leave the colour intact, however if the field it cannot auto fill, then it makes the background yellow.

Resolution: User

As a user, there is only one thing you can do to prevent the form background being yellow, and that is simply to uninstall the Google Toolbar. Unfortunately this is a feature of the Google Toolbar that you cannot currently disable.

Resolution: Web Developer

Fortunately, as a web developer you can override the behaviour of Google Toolbar turning some of your form fields yellow, by declaring the background colour of the fields as important. This can be done by adding !important in your CSS for the entry for the form field background colour. So you would need something like this in you CSS:

background: #FFFFFF !important;

Yellow Forms in Firefox

Introduction

Reason for yellow fields

Resolution: User

Resolution: Web Developer

Related Forum Posts