Ugly yellow form fields
Once again someone asked on CSS-D why MSIE shows some horribly yellow text boxes, and how to work around that.
The riddle is easily solved – the google toolbar highlights form fields that can be automatically filled with data you entered earlier and shades them yellow.
Patrick Griffiths reported on that some year ago, and of course there is a developer who came up with a JavaScript workaround to suppress this functionality.
Personally, I think it is a nice to have feature. It was bad practise of google to not make it more obvious that the toolbar causes these changes and explain what they mean. However, the amount of work some developers put into trying to control the UI as much as possible with web client technologies just makes me snigger.
Wake up, smell the coffee. Yes, you might know a lot about usability and you can design well, but it is the user’s choice to install the toolbar, and live with its features – or turn them off. The colouring has a reason, it is not done because google like yellow.
December 14th, 2005 at 10:32 am
Chris @ 12/14/2005 / 11:32 am filed under: General, Tips & Tricks, Experiments, [...]
May 4th, 2005 at 8:06 pm
Sometimes it is not only about design – I use javascript form checker (and I used it even before google or google toolbar existed) and when the content of field is incorrect, checker adds class “invalid” to it. All my stylesheets show invalid fields with orange background so it is very confusing when google toolbar adds his own yellow background to such form.
May 4th, 2005 at 8:21 pm
Richard: Simply relying on a colour change is not enough to highlight an error, though, that is why I tend to add an icon with an appropriate alternative text
May 5th, 2005 at 1:01 am
I think designers/developers often want to disable the yellow because:
1. Most people with AutoFill enabled don’t actually use it or know what it is.
2. It often conflicts with the design and causes confusion (see #1)
3. AutoFill often gets it wrong.
However, that doesn’t justify thwarting AutoFill users. One thing I mention in my article is that a compromise is the best possible solution, as it doesn’t thwart those who actively use AutoFill.
For example, you can use JavaScript to make normal fields and AutoFill fields a different color so as to maintain the distintion, and you can even have a message on the page that only AutoFill users will see. That way, you can help educate those that were unaware of the AutoFill functionality.
May 5th, 2005 at 7:49 am
Jon: First of all, I have nothing against you or the script per se. However, no matter how you turn it, I don’t consider it our job to explain browser add-ons to our users in the markup, unless we need to do this (company policies for example).
Users with an own stylesheet or text browsers will get a message that doesn’t make sense or is just annoying telling them about an add-on of another browser.
If you really want to add this message, then check beforehand that the toolbar is installed, the browser in question is used, the autofill function is enabled, and add the message via the DOM and not as simple markup.
It is commendable to help visitors understand problems, but it is Google’s job to make it more obvious.
Adding an own colour to the autofill fields confuses things even more.
March 8th, 2006 at 7:55 am
A simple solution to web designers who don’t like autofill, just make all your fields yellow! No Java or fancy pants work required.
Can anyone help with my following problem?
I have a field in a form which is highlighted by autofill, yet the field has a unique name, even if I change or completely remove the name it still comes up yellow, If I use the auto fill function it then replaces the default value in the field with my email address?
Thanks for any thoughts
Tim
March 8th, 2006 at 12:22 pm
An addition to the previous comment, I’ve discovered that the first field in the form always turns yellow and inserts the email address when autofill is activated, no matter what it’s name, any ideas?
Tim
March 8th, 2006 at 12:27 pm
Tim, mine and the other potential helper’s crystal ball is foggy and the tea leaves don’t help either.
Can you give us a URL that shows your problem, that would make fixing and helping a lot easier.
March 8th, 2006 at 1:19 pm
The url is http://www.travelwild.com.au/10daa/book.html
If you have the google toolbar and have filled in the autofill options you will notice that the first field is yellow, if you activate the autofill this field inserts your email address.
As per my previous message, whatever field is first gets the treatment, If I put the date field first, it happens to the date.
I have also discovered that if I name another field as per the recommendations at http://www.ietf.org/rfc/rfc3106.txt, which is what google advises to do, then the autofill function fails to work at all (it appears gray on the toolbar) and no fields are yellow, you can see where I have done this at “www.travelwild.com.au/10daa/book2.html”:www.travelwild.com.au/10daa/book2.html where I have named the card field Ecom_Payment_Card_Number
Although this is a solution of sorts and solves my immediate problem, something is definitely not right.
April 12th, 2006 at 7:43 pm
Another design problem is that the google toolbar only sets the background-color property, and not the foreground color. So if you use a scheme say with white text on a dark background, the now yellow fields will be quite unreadable. Then it becomes a usability issue and not just a design issue.
Also there is another way that can defeat the autofill (if your intent really is to defeat it and not just hide the yellow). The toolbar seems to analyze the text within a label element first if you have one. This helps to constrain the toolbar’s AI. Then for each of the magic keywords, like “name” or “email”, you can insert an empty element inside the word’s letters, such as:
<label for="x">Your n<i></i>ame</label>
<input id="x" type="text" />
</input>
It’s not perfect, because screen readers may stumble on the word. But visually it will look fine. Another thing to perhaps try (if you don’t care about non-visual browsers at all) is to create an empty label element for the input field, and put the text of your real label elsewhere.