151

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

3
  • 1
    this is not just an issue in Chrome. Google Toolbar for other browsers does the same "yellowing" of the input fields. Oct 6, 2008 at 20:06
  • 2
    I've provided an answer for you which works below. Mar 1, 2009 at 22:04
  • 8
    I don't understand why everyone is talking about outline:none, the question is about the yello background, NOT the outline. And the autocomplete attribute set to off will NOT fix the issue, as davebug said he wants the autocomplete to work, just not the yellow background.
    – user892826
    Aug 13, 2011 at 7:01

13 Answers 13

135

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; }
11
  • 9
    Background? I wasn't aware that Chrome added a background color as well? If so, that can be fixed by something like :focus { background-color: #fff; } May 30, 2010 at 9:43
  • 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. Jul 12, 2010 at 16:59
  • 2
    @pestaa correct, this is not the right answer, but it certainly solves a similar problem Jan 3, 2011 at 3:59
  • Take care when dealing with tablets and stuff, the default Android browser is a little difficult to use without the outline. Easy enough to apply to non-mobile browsers though :)
    – user50049
    Feb 4, 2012 at 17:12
  • A small improvement: input[type=text], input[type=password], input[type=email], textarea, select { outline: none; } Apr 8, 2012 at 2:14
75

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" ...>
4
  • "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." Oct 6, 2008 at 21:54
  • Heh...yes, thank you, though I suppose I do still need to check in Chrome, right? Oct 7, 2008 at 14:23
  • 2
    for people using rails simple form <%= simple_form_for @user, html: { autocomplete: 'off' } do |f| %>
    – carbonr
    Dec 9, 2013 at 14:04
  • sorry to say that this didn't help me
    – M.Islam
    Feb 14, 2019 at 5:06
56

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;
}
5
  • this is a great hack. Thanks
    – Jason
    Dec 17, 2015 at 22:09
  • I would add focus to that too :D input:-webkit-autofill, input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #FFF inset; }
    – StephanieQ
    Mar 16, 2016 at 4:40
  • hi @JStormThaKid, i used this...,but didn't work for correct inputs... please answer this...
    – mithu
    Mar 28, 2016 at 12:29
  • Thanks for answering the question he actually asked! I had almost started to lose hope.
    – BVernon
    Jul 11, 2016 at 22:21
  • Best answer here, I still wanted google autocomplete, so thanks
    – Spangle
    Feb 13, 2019 at 23:49
14

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);
    });
});}
2
  • Thanks for the hint! However after posting the form, clicking the back button, the yellow highlight came back. I've extended your snippet (see my answer) to cover this.
    – 321X
    Apr 11, 2013 at 19:39
  • +1 @Benjamin nice solution, it flashs little bit the yellow but it fixes at the end ;) Aug 12, 2013 at 21:06
7

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)

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

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.

1

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');
    };
    
1

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

1

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

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');" />
0
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 ; }
-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.

0

Not the answer you're looking for? Browse other questions tagged or ask your own question.