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

StackOverflow https://stackoverflow.com/questions/175951

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 affected 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 would 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).

Was it helpful?

Solution

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

OTHER TIPS

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

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:

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

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top