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

this is not just an issue in Chrome. Google Toolbar for other browsers does the same "yellowing" of the input fields. — Carlton Jenke, Oct 06 '08 at 20:06
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. — , Aug 13 '11 at 07:01

score 136 · Answer 1 · edited May 18 '12 at 14:21

136

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

edited May 18 '12 at 14:21

random

9,774
10
66
83

answered Feb 24 '09 at 17:40

John Leidegren

59,920
20
131
152

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; }` – John Leidegren May 30 '10 at 09:43
2

@pestaa correct, this is not the right answer, but it certainly solves a similar problem – David Lawson Jan 03 '11 at 03: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 :) – Tim Post Feb 04 '12 at 17:12
A small improvement: `input[type=text], input[type=password], input[type=email], textarea, select { outline: none; }` – Felipe Lima Apr 08 '12 at 02:14
Note you can also change the color if you want by setting the outline-color property in your css for your autocomplete, Chrome simply has a default. – Cory Gross Jun 26 '12 at 00: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. – Tom Boutell Jul 12 '10 at 16:59
This worked for me: :focus, :active { outline: none !important; } – Mar 27 '13 at 05:37
Please STOP upvoting this answer, as it totally does NOT answer the question! The question was about autofill, not focus! – griffin Jun 21 '13 at 10:30
@griffin Funny hu? How a little misunderstanding can outweigh the accepted answer, almost 3 to 1. This might not address the auto-complete issue but it does address the issue of color which is in the question, repeatedly. No need to be upset, people obviously found this useful the question is just misleading. – John Leidegren Jul 12 '13 at 08:23
"re-coloring the input boxes" in case of "auto-fill", but you're talking about background-color in case of focus, which is totally different. Sorry, but you're not answering the question, and it does NOT address the issue of applied background color in case of autofill, as autofilled boxes are not necessarily focused at the same time! And if people are led here when trying to change something about autofill, they will obviously also encounter your wrong answer, which defeats the purpose of stackoverflow, which is in helping people solve problems they have. – griffin Jul 12 '13 at 10:23
I think the community has spoken, clearly, on the subject. A lot of people are being mislead (if you dissect the question and get picky about it) but the answer is still satisfactory to most because it has (in some odd way) captured their intention. That's what the votes are for. If this somehow does not meet your expectations hat's okay but I do believe you belong to a minority. – John Leidegren Jul 12 '13 at 11:36

score 75 · Accepted Answer · answered Oct 06 '08 at 20:09

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

answered Oct 06 '08 at 20:09

Ben Hoffstein

102,129
8
104
120

"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." – Dave Rutledge Oct 06 '08 at 21:54
Heh...yes, thank you, though I suppose I do still need to check in Chrome, right? – Dave Rutledge Oct 07 '08 at 14:23
2

for people using rails simple form `<%= simple_form_for @user, html: { autocomplete: 'off' } do |f| %>` – carbonr Dec 09 '13 at 14:04
sorry to say that this didn't help me – M.Islam Feb 14 '19 at 05:06

score 56 · Answer 3 · answered Sep 17 '14 at 02:14

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

answered Sep 17 '14 at 02:14

JStormThaKid

1,794
3
20
26

this is a great hack. Thanks – Jason Dec 17 '15 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 '16 at 04:40
hi @JStormThaKid, i used this...,but didn't work for correct inputs... please answer this... – mithu Mar 28 '16 at 12:29
Thanks for answering the question he actually asked! I had almost started to lose hope. – BVernon Jul 11 '16 at 22:21
Best answer here, I still wanted google autocomplete, so thanks – Spangle Feb 13 '19 at 23:49

Benjamin · Answer 4 · 2010-11-23T21:46:33.667

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

edited Nov 23 '10 at 21:46

answered Nov 23 '10 at 21:40

Benjamin

261
3
7

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 '13 at 19:39
+1 @Benjamin nice solution, it flashs little bit the yellow but it fixes at the end ;) – itsme Aug 12 '13 at 21:06

score 7 · Answer 5 · edited Sep 18 '11 at 00:46

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)

score 2 · Answer 6 · answered Oct 06 '08 at 20:07

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.

score 2 · Answer 7 · answered Feb 05 '12 at 19:07

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.

answered Feb 05 '12 at 19:07

hohner

11,498
8
49
84

score 1 · Answer 8 · answered Apr 11 '13 at 19:36

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

Vin · Answer 9 · 2013-12-19T01:38:52.087

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

score 1 · Answer 10 · answered Apr 06 '16 at 01:47

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

answered Apr 06 '16 at 01:47

hsobhy

1,493
2
21
35

score 1 · Answer 11 · edited Nov 22 '12 at 03:12

1

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

edited Nov 22 '12 at 03:12

Nathan

11,814
11
50
93

answered Jun 05 '11 at 15:38

Tim

2,466
1
21
18

score 0 · Answer 12 · edited Jun 13 '11 at 11:47

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

edited Jun 13 '11 at 11:47

ib.

27,830
11
80
100

answered Jun 13 '11 at 10:18

NewFangSol

7
1

score -1 · Answer 13 · answered Oct 06 '08 at 20:06

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

answered Oct 06 '08 at 20:06

Quentin

914,110
126
1,211
1,335

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

13 Answers13

Linked

Related