How do I stop Chrome from yellowing my site's input boxes?

Question

Among other text and visual aids on a form submission, post-validation, I'm coloring my input boxes red to signify the interactive area needing attention.

On Chrome (and for Google Toolbar users) the auto-fill feature re-colors my input forms yellow. Here's the complex issue: I want auto-complete allowed on my forms, as it speeds users logging in. I am going to check into the ability to turn the autocomplete attribute to off if/when there's an error triggered, but it is a complex bit of coding to programmatically turn off the auto-complete for the single effected input on a page. This, to put it simply, would be a major headache.

So to try to avoid that issue, is there any simpler method of stopping Chrome from re-coloring the input boxes?

[edit] I tried the !important suggestion below and it had no effect. I have not yet checked Google Toolbar to see if the !important attribute woudl work for that.

As far as I can tell, there isn't any means other than using the autocomplete attribute (which does appear to work).

Answer 1

If I remember correctly, an !important rule in the stylesheet for the background color of the inputs will override the Google toolbar autocomplete - presumably the same would be true of Chrome.

Answer 2

Yes, it would be a major headache, which in my opinion isnt worth the return. Maybe you could tweak your UI strategy a bit, and instead of coloring the box red, you could color the borders red, or put a small red tape beside it (like the gmails "Loading" tape) which fades away when the box is in focus.

Answer 3

I know in Firefox you can use the attribute autocomplete="off" to disable the autocomplete functionality. If this works in Chrome (haven't tested), you could set this attribute when an error is encountered.

This can be used for both a single element

<input type="text" name="name" autocomplete="off">

...as well as for an entire form

<form autocomplete="off" ...>

Answer 4

Set the CSS outline property to none.

input[type="text"], input[type="password"], textarea, select { 
    outline: none;
}

Answer 5

Thanx Ben Hoffstein, your solution worked for me.

""

Answer 6

Thankx John Leidegren..

You rock and your code also...great work...keep it up...codes work for me :)

Answer 7

This method will not pass validator :(

Answer 8

input:focus { outline:none; }

Answer 9

Killing the outline with CSS might prevent the yellowing but it won't prevent actual autofilling. If you want to do that, it's important to use the autocomplete attribute, nonstandard or not.