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

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

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.

Answer 3

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; }

Answer 4

The simpler way in my opinion is:

1. Get http://www.quirksmode.org/js/detect.html

2. Use this code:

   if (BrowserDetect.browser == "Chrome") {
     jQuery('form').attr('autocomplete','off');
   };
   

Answer 5

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;
}

Answer 6

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!!