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

Set the CSS outline property to none.

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

In cases where the browser may add a background color as well this can be fixed by something like

:focus { background-color: #fff; }

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" ...>

this is exactly what your looking for!

// Just change "red" to any color
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px red inset;
}

By using a bit of jQuery you can remove Chrome's styling while keeping the autocomplete functionality intact. I wrote a short post about it here: http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
    $('input:-webkit-autofill').each(function(){
        var text = $(this).val();
        var name = $(this).attr('name');
        $(this).after(this.outerHTML).remove();
        $('input[name=' + name + ']').val(text);
    });
});}

To remove the border for all fields you can use the following:

*:focus { outline:none; }

To remove the border for select fields just apply this class to the input fields you want:

.nohighlight:focus { outline:none; }

You can of course change the border as you desire as well:

.changeborder:focus { outline:Blue Solid 4px; }

(From Bill Beckelman: Override Chrome's Automatic Border Around Active Fields Using CSS)

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.

It's a piece of cake with jQuery:

if ($.browser.webkit) {
    $("input").attr('autocomplete','off');
}

Or if you want to be a bit more selective, add a class name for a selector.

The simpler way in my opinion is:

Get http://www.quirksmode.org/js/detect.html Use this code: if (BrowserDetect.browser == "Chrome") { jQuery('form').attr('autocomplete','off'); };

After applying @Benjamin his solution I found out that pressing the back button would still give me the yellow highlight.

My solution somehow to prevent this yellow highlight to come back is by applying the following jQuery javascript:

<script type="text/javascript">
    $(function() {
        if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
        var intervalId = 0;
            $(window).load(function() {
                intervalId = setInterval(function () { // << somehow  this does the trick!
                    if ($('input:-webkit-autofill').length > 0) {
                        clearInterval(intervalId);
                        $('input:-webkit-autofill').each(function () {
                            var text = $(this).val();
                            var name = $(this).attr('name');
                            $(this).after(this.outerHTML).remove();
                            $('input[name=' + name + ']').val(text);
                        });
                    }
                }, 1);
            });
        }
    });
</script>

Hope it helps anyone!!

This works. Best of all, you can use rgba values (the box-shadow inset hack doesn't work with rgba). This is a slight tweak of @Benjamin's answer. I am using $(document).ready() instead of $(window).load(). It seems to work better for me - now there's much less FOUC. I don't believe there are and disadvantages to using $(document).ready().

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(document).ready(function() {
        $('input:-webkit-autofill').each(function(){
            var text = $(this).val();
            var name = $(this).attr('name');
            $(this).after(this.outerHTML).remove();
            $('input[name=' + name + ']').val(text);
        });
    });
};

for today's versions, This works too if placed in one of the two login inputs. Also fix the version 40+ and late Firefox issue.

<input readonly="readonly" onfocus="this.removeAttribute('readonly');" />

input:focus { outline:none; }

That worked great for me but more than likely to keep things uniform on your site your going to want to also include this in your CSS for textareas:

textarea:focus { outline:none; }

Also it may seem obvious to most but for beginners you can also set it to a color as such:

input:focus { outline:#HEXCOD SOLID 2px ; }

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.