Removing input background colour for Chrome autocomplete?

Question

On a form I'm working on, Chrome is auto-filling the email and password fields. This is fine, however, Chrome changes the background colour to a pale yellow colour.

The design I'm working on is using light text on a dark background, so this really messes up the look of the form - I have stark yellow boxes and near-invisible white text. Once the field is focused, the fields return to normal.

Is it possible to stop Chrome changing the colour of these fields?

score 1612 · Accepted Answer · edited Jun 19 '23 at 14:35

1612

You can change input box styles as well as text styles inside input box:

Here you can use any color e.g. white, #DDD, rgba(102, 163, 177, 0.45).

But transparent won't work here.

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

Additionally, you can use this to change the text color:

/*Change text in autofill textbox*/
input:-webkit-autofill{
    -webkit-text-fill-color: yellow !important;
}

Advice: Don't use an excessive blur radius in the hundreds or thousands. This has no benefit and might put processor load on weaker mobile devices. (Also true for actual, outside shadows). For a normal input box of 20px height, 30px ‘blur radius’ will perfectly cover it.

Edit 2023:
To have both transparency and ability to change background color together:

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329;
}

Note that transition here does nothing in recent Chrome browsers, it's only a fallback solution for older versions of Chrome.

edited Jun 19 '23 at 14:35

Reza Makvandi

33
7

answered Jan 07 '13 at 23:35

Fareed Alnamrouti

30,771
4
85
76

7

In Chrome now the user agent stylesheet shows `:-internal-autofill-previewed` and `:-internal-autofill-selected` pseudoclasses instead of `-webkit-autofill`... Mysteriously however, `-webkit-autofill` still works. I personally didn't need the `!important`. – Andy Apr 12 '19 at 06:48
I didn't need the hover/focus/active pseudo selectors – Antoine May 14 '20 at 12:36
This dims the highlight for the focus and makes it solid and thin line. Is there a solution for that? – Muhammad Ali Aug 30 '20 at 11:33
I think browser able to support background-color customization as the autocomplete color really mess up the design looks , for example material design input – rickvian Nov 03 '20 at 12:51
Thx, it worked for the latest version of Chrome 86, no need for `!mportant` – Patronaut Nov 23 '20 at 11:57
1

Use `-webkit-box-shadow: none` if working with translucent backgrounds and want to remove it altogether. – beano Dec 30 '20 at 17:51
The `:active` was the fundamental solution. Tks a lot. – Sandro Santos Nov 23 '22 at 20:55
1

Just wanted to mention, that the solution for the text works, except that the pipe color remains unchanged, unless you declare also `caret-color: yellow` – Cyman Apr 07 '23 at 02:55
none of them worked for me – murtuzaali_surti Aug 04 '23 at 17:48

score 416 · Answer 2 · answered Mar 30 '15 at 15:44

416

I have a better solution.

Setting the background to another color like below didn't solve the problem for me because I needed a transparent input field

-webkit-box-shadow: 0 0 0px 1000px white inset;

So I tried some other things and I came up with this:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

answered Mar 30 '15 at 15:44

Nathan White

4,277
1
10
3

13

Awesome, I also need a transparent background. PS: don't forget the `-webkit-text-fill-color: yellow !important;` for text color. – gfpacheco Dec 28 '15 at 17:11
This will still show the autofill background when the input has been hidden/shown with `display`. [Fiddle - Check it out](https://jsfiddle.net/h4wm1bL2/1/) – xyhhx Feb 19 '16 at 17:14
37

Instead of setting the `transition-duration` ridiculously high, it would be better to set the `transition-delay` instead. That way you reduce even further the possibility of any changes in the colours. – Shaggy Apr 27 '16 at 11:03
The `transition` hack will work only if the input is not auto-filled with a default entry recorded by the browser, otherwise the yellow background will still be there. – guari Apr 30 '16 at 20:36
6

Great solution.... but why does this work? And why does setting `background-color` not work? Chrome needs to fix this!! – TetraDev Jul 01 '16 at 22:16
I have set an image as background of the input field, this solution removes the yellow shade, but the background image is still hidden – Matteo Tassinari Jul 20 '16 at 12:29
This one worked for me while the other one don't... For a white background. – Jona Oct 31 '16 at 01:14
This works for me with the current version of Chrome (55.0.2883.87 m (64-bit)). But I needed to add support for the select control for better coverage. Unfortunately this breaks the compilation of LESS files so I had to add it separately on the page and will eventually include it in the Master Page (asp.net). – Necromancer Jan 20 '17 at 15:05
Doesn't work properly if you use WCAG2.0. Change of background on :focus will be distorted. Is there any other solution? The autocomplete behaviour is annoying in Cr. – 18C Nov 11 '17 at 09:39
5

Use: `input:-webkit-autofill { transition: all 0s 50000s; }` to delay all style changes – RienNeVaPlu͢s Feb 14 '19 at 04:09
in my case I need the same thing for the select, so my final version looks like this: select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus, select:-webkit-autofill:active, input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; } – Sergey Feb 10 '21 at 11:44
Works for Version 89.0.4389.128 (Official Build) (x86_64) – Brian Scramlin Apr 22 '21 at 20:02
The max integer is 2147483647s resulting in 68.24 years delay – Nate May May 22 '22 at 16:26
Note that this won't work well for dark backgrounds. – GROVER. Jun 07 '22 at 10:22
` transition: background-color 5000s ease-in-out 0s;` this helps me to solve! – miltonbhowmick Dec 27 '22 at 11:06

score 337 · Answer 3 · edited Sep 25 '21 at 02:03

337

The previous solutions of adding a box-shadow works well for people who need a solid colour background. The other solution of adding a transition works, but having to set a duration/delay will mean that at some point it may show again.

My solution is to use keyframes instead, that way it will always show the colours of your choosing.

@-webkit-keyframes autofill {
    0%,100% {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

Example Codepen: https://codepen.io/-Steve-/pen/dwgxPB

edited Sep 25 '21 at 02:03

Saurin Dashadia

1,140
11
25

answered May 25 '16 at 08:57

Steve

4,314
3
16
21

5

I find this to be better than the accepted answer... the box-shadow method is clever and does work, but when a user is selecting a value to autofill, the default color will briefly flash in the input field, which can be troublesome if your inputs have dark backgrounds. This solution has no such issues. Cheers! – skwidbreth Dec 19 '19 at 21:56
3

This works for Vuetify 2 especially if you set `color: inherit` – Marc Jan 22 '20 at 12:54
11

This used to work for me, but in newest chrome(88) it is not. Any ideas why? And updated solution? – sanjuro Mar 03 '21 at 07:23

score 157 · Answer 4 · edited Jun 15 '23 at 18:37

157

To have a transparent background while not using a time delay (especially needed in modern web applications where people can stop using it for a while and want a predictable behavior of the interface), use this:

input:-webkit-autofill { 
    -webkit-background-clip: text;
}

body {
  background: lightblue;
}

input {
  background: transparent;
}

input.no-autofill-bkg:-webkit-autofill {
  -webkit-background-clip: text;
}

<input type="text" name="email" />
<input type="text" name="email" class="no-autofill-bkg" />

Working on: Chrome 83 / 84.0.4147.89, Edge 84.0.522.44

edited Jun 15 '23 at 18:37

InSync

4,851
4
8
30

answered Jun 28 '20 at 15:48

manuel-84

2,582
1
23
23

Unfortunately this doesn't work well with inputs with a `background-color` set – Ricky Boyce Jul 30 '20 at 00:21
Thanks. Also, does it affect the Bootstrap style in the comment below? @manuel-84 https://stackoverflow.com/questions/21401766/box-shadow-not-shown-on-safari-mobile-on-ios-7-in-landscape/51626446#51626446 – KABA Aug 27 '20 at 07:21
@KABA yes of course it will override the background-clip property on webkit, it's still css code so everyone have to study the impact on his codebase – manuel-84 Aug 29 '20 at 13:46
Awesome, -webkit-background-clip: text; + border-radius:.25rem = round corners – Denis TRUFFAUT Jan 30 '21 at 05:05
This is a nice solution, sometimes adding `!important` is necessary. – Nadav Feb 06 '21 at 08:36
3

To change a color add `-webkit-text-fill-color: white !important;` – Black Mar 04 '21 at 17:49
works with mat-form-field thanks man. added color too ` -webkit-text-fill-color: #fff; background-clip: text;` – minigeek Mar 30 '21 at 12:30
This + the accepted answer worked for me. – Shahriar May 12 '22 at 18:51
1

Worked perfectly for me ~~ July 2023 – Redemption Okoro Jul 19 '23 at 22:41

Hannes Schneidermayer · Answer 5 · 2022-04-19T21:49:28.703

88

Update 2022

Working after 2022 update:

input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted] {
    background-color: transparent !important;
}

edited Apr 19 '22 at 21:49

answered Sep 28 '21 at 15:16

Hannes Schneidermayer

4,729
2
28
32

1

If you're having trouble getting this to work, be sure you don't have another transition set that's overriding this transition on the inputs. – Brian Poole Sep 27 '22 at 00:25
what about browser support for this? – AzizStark Aug 20 '23 at 12:51
1

safe to use @AzizStark https://caniuse.com/css-transitions – Hannes Schneidermayer Aug 29 '23 at 09:19

score 85 · Answer 6 · edited Sep 27 '21 at 09:11

85

This is my solution, I used transition and transition delay therefore I can have a transparent background on my input fields.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
    -webkit-transition-delay: 9999s;
}

edited Sep 27 '21 at 09:11

Saurin Dashadia

1,140
11
25

answered Sep 10 '15 at 15:07

Gísli Freyr Svavarsson

2,275
2
18
13

8

I have set an image as background of the input field, this solution removes the yellow shade, but the background image is still hidden – Matteo Tassinari Jul 20 '16 at 12:29
Best solution so far, works great with existing `box-shadow` for validation – Yoann Aug 24 '16 at 09:42
chrome said `"color 9999s ease-out, background-color 9999s ease-out";` is not valide exprssion. I used code then, `-webkit-transition: background-color 9999s ease-out;` and `-webkit-text-fill-color: #fff !important;` – naanace Jun 14 '18 at 01:36
@Yoann how exactly did it work with your existing `box-shadow` validation? In my case, due to this css rule, my custom red box shadow (which indicates an input error) gets delayed, making the user believe the most recent input is invalid when in fact it's good. – Paul Razvan Berg Dec 02 '19 at 00:20

Mohamed Mansour · Answer 7 · 2012-08-06T12:46:15.463

62

This has been as designed since this coloring behavior has been from WebKit. It allows the user to understand the data has been prefilled. Bug 1334

You could turn off autocomplete by doing (or on the specific form control:

<form autocomplete="off">
...
</form

Or you can change the colour of the autofill by doing:

input:-webkit-autofill {
    color: #2a2a2a !important;
}

Note, there is a bug being tracked for this to work again: http://code.google.com/p/chromium/issues/detail?id=46543

This is a WebKit behavior.

edited Aug 06 '12 at 12:46

answered May 06 '10 at 22:26

Mohamed Mansour

39,445
10
116
90

28

thanks but that webkit CSS rule isn't working. The user agent stylesheet is always overruling the background color, even with it (a) set to `!important` and (b) targeted with an ID for higher specificity. It looks like Chrome is always going to override it. Removing autocomplete does seem to work, but it's really not what I want to do. – DisgruntledGoat May 29 '10 at 11:54
1

Some people have the same issue, did you check the bug post? http://code.google.com/p/chromium/issues/detail?id=1334 – Mohamed Mansour May 30 '10 at 14:59
8

Chrome blocks any CSS attempts to override that yellow color. Setting `autocomplete="off"` will certainly raise accessibility issues. Why is this answer marked as correct anyway? – João Apr 04 '12 at 09:43
1

@JoãoRamos That is a Chrome bug, http://code.google.com/p/chromium/issues/detail?id=46543 – Mohamed Mansour Aug 06 '12 at 12:46
2

This is a good solution but if you're using React, it will complain that autocomplete is an unknown DOM property. Therefore, it's actually autoComplete (note camelcased). – Tim Scollick Jun 05 '15 at 01:49
3

Turning off auto complete is a hack not a solution – Paullo Mar 17 '17 at 10:47
The Chrome bug was marked as WONTFIX in 2019 – Pier Dec 22 '21 at 19:13

Tamás Pap · Answer 8 · 2012-12-13T12:33:54.780

46

A possible workaround for the moment is to set a "strong" inside shadow:

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

edited Dec 13 '12 at 12:33

answered Dec 13 '12 at 12:27

Tamás Pap

17,777
15
70
102

3

This is the solution that is actually working, we do not want to skip the yellow background only some times, as the accepted answer would result in. – davidkonrad Aug 19 '16 at 08:43

score 27 · Answer 9 · edited Sep 27 '21 at 13:23

27

try this for hide autofill style

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    background-color: #FFFFFF !important;
    color: #555 !important;
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #555555 !important;
}

edited Sep 27 '21 at 13:23

Saurin Dashadia

1,140
11
25

answered Dec 11 '15 at 02:32

Francisco Costa

6,713
5
34
43

1

for the curious, background-color has no effect. The -webkit-box-shadow is the clever bit that overrides the yellow background in Chrome – Geuis May 12 '16 at 00:08

score 26 · Answer 10 · edited Sep 28 '21 at 12:53

After 2 hours of searching it seems google still overrides the yellow color somehow but i for the fix for it. That's right. it will work for hover, focus etc as well. all you have to do is add !important to it.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

this will completely remove yellow from input fields

score 24 · Answer 11 · edited Sep 27 '21 at 03:22

24

All of the above answers worked but did have their faults. The below code is an amalgamation of two of the above answers that works flawlessly with no blinking.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

edited Sep 27 '21 at 03:22

Saurin Dashadia

1,140
11
25

answered Jun 12 '15 at 06:39

Jack Russell

409
4
5

I have set an image as background of the input field, this solution removes the yellow shade, but the background image is still hidden – Matteo Tassinari Jul 20 '16 at 12:30
This is the only one working for me in Chrome 83. The most voted one was working 'till Chrome 82. – sdlins Jun 05 '20 at 21:34

score 24 · Answer 12 · answered Oct 23 '15 at 21:43

24

SASS

input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-property: background-color, color

answered Oct 23 '15 at 21:43

Patrick Fisher

7,926
5
35
28

1

This actually worked for me since the accepted answer flashes a pale yellow. – CleoR Dec 23 '15 at 05:54

score 21 · Answer 13 · edited Sep 28 '21 at 17:00

21

I had an issue where I couldn't use box-shadow because I needed the input field to be transparent. It's a bit of a hack but pure CSS. Set the transition to a very long amount of time.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
}

edited Sep 28 '21 at 17:00

Saurin Dashadia

1,140
11
25

answered Mar 21 '16 at 20:18

Alex

211
2
3

As of now in latest Chrome 50.x.x, IT IS working perfectly fine. Thanks a lot! – vivekkupadhyay Apr 14 '16 at 12:17
5

Instead of setting the `transition-duration` ridiculously high, it would be better to set the `transition-delay` instead. That way you reduce even further the possibility of any changes in the colours. – Shaggy Apr 27 '16 at 11:01
@Shaggy thanks, I just switched it to a delay. Much nicer. – Alex May 12 '16 at 18:27

score 20 · Answer 14 · edited Apr 25 '23 at 11:08

20

Adding one hour delay would pause any css changes on the input element.
This is more better rather than adding transition animation or inner shadow.

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
  transition-delay: 3600s;
}

edited Apr 25 '23 at 11:08

Vinod Srivastav

3,644
1
27
40

answered Jun 25 '18 at 06:24

StefansArya

2,802
3
24
25

Just went through this thread and upvoted all answers with transition-delay, it works perfect and is easy enough to understand if passing the code off to somebody else who has no idea why you put it there. – Reed Nov 12 '20 at 03:38

score 15 · Answer 15 · edited Sep 27 '21 at 21:01

15

Try this: Same as @Nathan-white answer above with minor tweaks.

/* For removing autocomplete highlight color in chrome (note: use this at bottom of your css file). */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: all 5000s ease-in-out 0s;
    transition-property: background-color, color;
}

edited Sep 27 '21 at 21:01

Saurin Dashadia

1,140
11
25

answered Sep 24 '15 at 06:59

Surender Lohia

349
3
12

I like this one best because it means I don't have specifically set my background color or text color again. (good for my component that is used with a variety of different colors.) I changed the delay from 0s to 5000s to give it an additional 5000s of being my background color and text color. – Lindsay-Needs-Sleep Dec 24 '20 at 05:19

score 12 · Answer 16 · answered Jun 18 '14 at 05:35

In addition to this:

input:-webkit-autofill{
-webkit-box-shadow: 0 0 0px 1000px white inset;
}

You might also want to add

input:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px rgba(82, 168, 236, 0.6);
}

Other wise, when you click on the input, the yellow color will come back. For the focus, if you are using bootstrap, the second part is for the border highlighting 0 0 8px rgba(82, 168, 236, 0.6);

Such that it will just look like any bootstrap input.

score 12 · Answer 17 · edited Sep 27 '21 at 08:12

This will work for input, textarea and select in normal, hover, focus and active states.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

Here is SCSS version of the above solution for those who are working with SASS/SCSS.

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    &, &:hover, &:focus, &:active{
        -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    }
}

You brought fun to this question. ♪(^∇^*) – shrekuu Jul 06 '23 at 03:08 — shrekuu, Jul 06 '23 at 03:08

score 10 · Answer 18 · answered Dec 18 '17 at 15:58

10

I have a pure CSS solution which uses CSS Filters.

filter: grayscale(100%) brightness(110%);

The grayscale filter replaces the yellow with grey, then the brightness removes the grey.

SEE CODEPEN

answered Dec 18 '17 at 15:58

2ne

5,766
9
30
51

Ok but as many others solutions this will not allowi to have a transparent background – manuel-84 Jun 28 '20 at 15:27

score 9 · Answer 19 · answered Nov 23 '10 at 21:44

9

If you want to keep the autocomplete functionality intact you can use a bit of jQuery to remove Chrome's styling. 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);
    });
});}

answered Nov 23 '10 at 21:44

Benjamin

261
3
7

This seems to be the best solution, although it blocks [Kicksend's mailcheck](https://github.com/Kicksend/mailcheck). Any ideas on how to work this around? – João Apr 04 '12 at 09:52
This is not a good solution since then google chrome's password auto complete stops working. That is initially you fill in the name and Google chrome auto fills the password. However once the above javascript executes, name gets deleted and set again, and the auto filled password is lost – vanval Sep 26 '14 at 20:26

Marghen · Answer 20 · 2023-06-06T14:18:17.983

8

2023 - Transparent background

For transparent input background (light text) on dark background:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active { 
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
}

edited Jun 06 '23 at 14:18

answered Jan 31 '23 at 10:42

Marghen

255
2
6

I like this answer. But I'd replace `transition` with `-webkit-background-clip: text;`; – Getsumi3 Jun 05 '23 at 12:02
Thank you @Getsumi3, I updated the answer with your contribution. I left the transition part for older browsers as fallback. – Marghen Jun 06 '23 at 14:20

score 7 · Answer 21 · edited Sep 27 '21 at 00:24

7

Google Chrome user agent prevent developers' CSS, So for changing autofill UI must use another property like these:

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #d500ff inset !important;
    /*use inset box-shadow to cover background-color*/
    -webkit-text-fill-color: #ffa400 !important;
    /*use text fill color to cover font color*/
}

edited Sep 27 '21 at 00:24

Saurin Dashadia

1,140
11
25

answered Oct 19 '17 at 11:48

AmerllicA

29,059
15
130
154

The `box-shadow` property doesn't need prefixing with `-webkit-` anymore, and it would be more performant to set the size of this to half the height of the input (rather than `1000px`) - where possible, of course. But otherwise, this is unfortunately the best solution to the problem – Oliver Jul 23 '20 at 15:46

score 7 · Answer 22 · answered Feb 18 '12 at 04:29

I have developed another solution using JavaScript without JQuery. If you find this useful or decide to re-post my solution, I only ask that you include my name. Enjoy. – Daniel Fairweather

var documentForms = document.forms;

for(i = 0; i < documentForms.length; i++){
    for(j = 0; j < documentForms[i].elements.length; j++){
        var input = documentForms[i].elements[j];

        if(input.type == "text" || input.type == "password" || input.type == null){
            var text = input.value;
            input.focus();
            var event = document.createEvent('TextEvent');
            event.initTextEvent('textInput', true, true, window, 'a');
            input.dispatchEvent(event);
            input.value = text;
            input.blur();
        }
    }
}

This code is based on the fact that Google Chrome removes the Webkit style as soon as additional text is entered. Simply changing the input field value does not suffice, Chrome wants an event. By focusing on each input field (text, password), we can send a keyboard event (the letter 'a') and then set the text value to it's previous state (the auto-filled text). Keep in mind that this code will run in every browser and will check every input field within the webpage, adjust it accordingly to your needs.

well, it worked for the most part.. it clears my password unfortunately. Trying to get it to save the password first and reset it after the for loops but chrome seems to be having some issues with that. mmmm — Dustin Silk, Apr 30 '15 at 09:10

score 6 · Answer 23 · edited Sep 26 '21 at 11:06

6

This works for me to remove the yellow background of the field:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:valid,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-transition-delay: 99999s;
    -webkit-text-fill-color:#D7D8CE;
}

edited Sep 26 '21 at 11:06

Laurel

5,965
14
31
57

answered Feb 04 '19 at 21:16

Ali Bagheri

3,068
27
28

score 5 · Answer 24 · answered Apr 25 '14 at 23:01

None of the solutions worked for me, the inset shadow won't work for me because the inputs have a translucent background overlaid over the page background.

So I asked myself, "How does Chrome determine what should be autofilled on a given page?"

"Does it look for input ids, input names? Form ids? Form action?"

Through my experimentation with the username and the password inputs, there were only two ways I found that would cause Chrome to not be able to find the fields that should be autofilled:

1) Put the password input ahead of the text input. 2) Give them the same name and id ... or no name and id at all.

After the page loads, with javascript you can either dynamically change the order of the inputs on the page, or dynamically give them their name and id ...

And Chrome doesn't know what hit it ... autocomplete is broken!

Crazy hack, I know. But it's working for me.

Chrome 34.0.1847.116, OSX 10.7.5

score 5 · Answer 25 · answered Mar 14 '15 at 00:31

For those who are using Compass:

@each $prefix in -webkit, -moz {
    @include with-prefix($prefix) {
        @each $element in input, textarea, select {
            #{$element}:#{$prefix}-autofill {
                @include single-box-shadow(0, 0, 0, 1000px, $white, inset);
            }
        }
    }
}

score 5 · Answer 26 · edited Sep 28 '21 at 07:11

I've got a solution if you want to prevent the autofill from google chrome but its a little bit "machete" , just remove the class that google chrome adds to those inputs fields and set the value to "" if you dont need to show store data after load.

$(document).ready(function () {
    setTimeout(function () {
        var data = $("input:-webkit-autofill");

        data.each(function (i, obj) {
            $(obj).removeClass("input:-webkit-autofill");
            obj.value = "";
        });
    }, 1);          
});

score 5 · Answer 27 · answered Dec 30 '17 at 20:52

5

This worked for me:

padding: 5px;
background-clip: content-box;

answered Dec 30 '17 at 20:52

arczi

111
1
6

1

`background-clip: text;` worked in Chrome – David Sep 01 '21 at 16:42

score 5 · Answer 28 · edited Sep 24 '21 at 11:34

5

It’s possible to change color of this box, like accepted answer.

But this method is not useful if you want to make the background transparent. However there’s a way (or rather workaround) to make it transparent, like this:

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    transition: background-color 5000s;
    -webkit-text-fill-color: #fff !important;
}

This is basically equivalent to transparent background.

edited Sep 24 '21 at 11:34

Saurin Dashadia

1,140
11
25

answered Apr 02 '21 at 18:04

tahmasib

91
2
9

1

This is the only one that works in a modern Chrome – ChrisAdmin Oct 21 '21 at 00:24

score 4 · Answer 29 · answered Oct 24 '13 at 12:41

I give up!

Since there is no way to change the color of the input with autocomplete I decide to disable all of them with jQuery for webkit browsers. Like this:

if (/webkit/.test(navigator.userAgent.toLowerCase())) {
    $('[autocomplete="on"]').each(function() {
        $(this).attr('autocomplete', 'off');
    });
}

score 4 · Answer 30 · edited Sep 28 '21 at 05:13

The solution of Daniel Fairweather (Removing input background colour for Chrome autocomplete?) (I would love to upvote his solution, but still need 15 rep) works really good. There is a really huge difference with most upvoted solution : you can keep background images ! But a little modification (just Chrome check)

And you need to keep in mind, it ONLY works on visible fields !

So you if you are using $.show() for your form, you need to run this code After show() event

My full solution (I have a show/hide buttons for login form ):

if (!self.isLoginVisible()) {
    var container = $("#loginpage");
    container.stop();
    self.isLoginVisible(true);
    
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
        var documentForms = document.forms;
        
        for (i = 0; i < documentForms.length; i++) {
            for (j = 0; j < documentForms[i].elements.length; j++) {
                var input = documentForms[i].elements[j];

                if (input.type == "text" || input.type == "password" || input.type == null) {
                    var text = input.value;
                    input.focus();
                    var event = document.createEvent('TextEvent');
                    event.initTextEvent('textInput', true, true, window, 'a');
                    input.dispatchEvent(event);
                    input.value = text;
                    input.blur();
                }
            }
        }
    }
} else {
    self.hideLogon();
}

Sorry again, I would prefer it to be a comment.

If you want, I can put a link to the site where I used it.

score 4 · Answer 31 · edited Sep 25 '21 at 02:15

We can use the -webkit-autofill pseudo-selector to target those fields and style them as we see fit. The default styling only affects the background color, but most other properties apply here, such as border and font-size. We can even change the color of the text using -webkit-text-fill-color which is included in the snippet below.

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: 1px solid green;
    -webkit-text-fill-color: green;
    -webkit-box-shadow: 0 0 0px 1000px #000 inset;
    transition: background-color 5000s ease-in-out 0s;
}

You mentioned font-size: how do I actually change the font-size? adding `font-size: 24px` doesn't work — freek van der wand, Dec 22 '21 at 14:40

score 3 · Answer 32 · edited Sep 29 '21 at 04:11

3

Unfortunately strictly none of the above solutions worked for me in 2016 (a couple years after the question)

So here's the aggressive solution I use:

function remake(e){
    var val = e.value;
    var id = e.id;
    e.outerHTML = e.outerHTML;
    document.getElementById(id).value = val;
    
    return true;
}

<input id=MustHaveAnId type=text name=email autocomplete=on onblur="remake(this)">

Basically, it deletes the tag while saving the value, and recreates it, then puts back the value.

edited Sep 29 '21 at 04:11

Saurin Dashadia

1,140
11
25

answered Jun 23 '16 at 00:27

FlorianB

2,188
18
30

The solution by fareed namrouti works fine for me on Chrome 51.0.2704.106 / OSX 10.11.5. – oens Jul 12 '16 at 21:58

score 3 · Answer 33 · answered Apr 17 '18 at 06:59

3

This works for me.

.input:-webkit-autofill {transition: background-color 5000s ease-in-out 0s;}

answered Apr 17 '18 at 06:59

Kostya Harutyunyan

199
1
3

2

This works, though worth noting you don't need the easing or delay: `.input:-webkit-autofill {transition: background-color 5000s}` also works. Alternatively, since the reason that this works is that it just slows down the transition so it's not noticeable, a better solution might be `input:-webkit-autofill { transition: background-color 1s 5000s; }`, as this rather *delays* the transition for that period – Oliver Jul 23 '20 at 15:41

score 3 · Answer 34 · edited Apr 25 '23 at 11:07

3

and this worked for me (Chrome 76 tested)

input:-internal-autofill-selected {
    background-color: transparent;
}

edited Apr 25 '23 at 11:07

Vinod Srivastav

3,644
1
27
40

answered Aug 30 '19 at 00:39

nh-labs

641
7
10

score 3 · Answer 35 · edited Mar 11 '12 at 06:26

Thanks Benjamin!

The Mootools solution is a little more tricky, as I can't get fields by using $('input:-webkit-autofill'), So what I've used is the following:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {

  window.addEvent('load', function() {
    setTimeout(clearWebkitBg, 20);
    var elems = getElems();
    for (var i = 0; i < elems.length; i++) {
      $(elems[i]).addEvent('blur', clearWebkitBg);
    }
  });
}
function clearWebkitBg () {
  var elems = getElems();
  for (var i = 0; i < elems.length; i++) {
    var oldInput = $(elems[i]);
    var newInput = new Element('input', {
      'name': oldInput.get('name'),
      'id': oldInput.get('id'),
      'type': oldInput.get('type'),
      'class': oldInput.get('class'),
      'value': oldInput.get('value')
    });
    var container = oldInput.getParent();
    oldInput.destroy();
    container.adopt(newInput);
  }
}
function getElems() {
  return ['pass', 'login']; // ids
}

score 2 · Answer 36 · answered Oct 05 '16 at 07:54

This is complex solution for this task.

(function($){
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
       $('input, select').on('change focus', function (e) {
            setTimeout(function () {
                $.each(
                    document.querySelectorAll('*:-webkit-autofill'),
                    function () {
                        var clone = $(this).clone(true, true);
                        $(this).after(clone).remove();
                        updateActions();
                    })
            }, 300)
        }).change();
    }
    var updateActions = function(){};// method for update input actions
    updateActions(); // start on load and on rebuild
})(jQuery)

*:-webkit-autofill,
*:-webkit-autofill:hover,
*:-webkit-autofill:focus,
*:-webkit-autofill:active {
    /* use animation hack, if you have hard styled input */
    transition: all 5000s ease-in-out 0s;
    transition-property: background-color, color;
    /* if input has one color, and didn't have bg-image use shadow */
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    /* text color */
    -webkit-text-fill-color: #fff;
    /* font weigth */
    font-weight: 300!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name" autocomplete="name"/>
<input type="email" name="email" autocomplete="email"/>

score 2 · Answer 37 · edited Sep 25 '21 at 19:53

2

input:-webkit-autofill {
    border: none;
    border-radius: .3rem;
    caret-color: #fff; /* Pour le I quand on édite */
    color: #fff;
    background: #292a2d;
    /* webkit autofill */
    -webkit-text-fill-color: #fff; /* Surcharge la font color d'autofill */
    -webkit-background-clip: text; /* Supprime le background autofill, utile pour le border radius */
    box-shadow: 0 0 0 50px #292a2d inset; /* Ajoute un fake background à base d'ombrage aplatit */
}

edited Sep 25 '21 at 19:53

Saurin Dashadia

1,140
11
25

answered Jan 30 '21 at 05:30

Denis TRUFFAUT

1,017
10
11

It'd be awfully helpful if your comments **weren't** in French... – SimonC Dec 15 '22 at 00:56
These are in english `input:-webkit-autofill { border: none; border-radius: .3rem; caret-color: #fff; /* For the I-beam cursor when editing */ color: #fff; background: #292a2d; /* webkit autofill */ -webkit-text-fill-color: #fff; /* Overrides the font color of autofill */ -webkit-background-clip: text; /* Clips the autofill background to the text, useful for border radius */ box-shadow: 0 0 0 50px #292a2d inset; /* Adds a fake background using a large inset shadow */ }` – Eddysanoli Apr 23 '23 at 06:42

score 1 · Answer 38 · answered May 23 '13 at 15:04

As mentioned before, inset -webkit-box-shadow for me works best.

/* Code witch overwrites input background-color */
input:-webkit-autofill {
     -webkit-box-shadow: 0 0 0px 1000px #fbfbfb inset;
}

Also code snippet to change text color:

input:-webkit-autofill:first-line {
     color: #797979;
}

score 1 · Answer 39 · edited Sep 26 '21 at 09:22

Although solutions that can be found in many answers do work in Chrome, they do not work in Safari for Mac and iOS.

Safari requires an additional statement – background-clip.

This is the full code for a solution that works across all major browsers on different platforms:

/* Disable autofill highlighting */
input:-webkit-autofill {
    -webkit-text-fill-color: var(--text-input-color) !important;
    -webkit-box-shadow: 0 0 0 1rem var(--page-background-color) inset !important;
    background-clip: content-box !important;
}

(Please change the --text-input-color and --page-background-color with your own values.)

score 1 · Answer 40 · edited Apr 25 '23 at 11:05

1

Try this

input:autofill{
    filter:none;
}

Basically, the browser just adds it own filters for 'autofill'ed inputs. Your styles go under this.

edited Apr 25 '23 at 11:05

Vinod Srivastav

3,644
1
27
40

answered Jul 10 '21 at 04:10

ThatGuy

55
7

score 1 · Answer 41 · edited Sep 25 '21 at 02:13

We have a scenario where in we have a checkbox to enable or disable input fields.

If checkbox is selected the fields will be disabled. Once checkbox is unchecked inputs fields are enabled. We can use chrome autofill to fill those fields like address and all.

On clicking back the checkbox to post autofill the input fields were disabled but Chrome is adding the background to fields populated with autofill In my case those were City, state and zip fields

to retain transparency in disabled input fields I had to do

input:disabled:-webkit-autofill,
input:disabled:-webkit-autofill:hover, 
input:disabled:-webkit-autofill:focus, 
input:disabled:-webkit-autofill:active  {
    transition: background-color 5000s;
    -webkit-text-fill-color: #fff !important;
    -webkit-background-clip: text;
    color: white !important;
}

score 1 · Answer 42 · answered Jun 05 '23 at 13:34

1

I almost tired all the solutions, but none worked:

but this code worked:

input,
select {
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

credit: github link

answered Jun 05 '23 at 13:34

aryankarim

184
1
10

1

Yep! That did it for me too, thanks. – Noud Jun 30 '23 at 11:11

score 0 · Answer 43 · edited Oct 16 '16 at 20:31

0

Simple, just add,

    autocomplete="new-password"

to the password field.

edited Oct 16 '16 at 20:31

Alex Shesterov

26,085
12
82
103

answered Oct 16 '16 at 19:51

Joakim Krassman

61
2
11

vinod joshi · Answer 44 · 2017-04-24T11:24:29.880

0

use this and check your problem issue is resolved

<input type="email" id="email" name="email" class="form-control validate" onfocus="this.removeAttribute('readonly');" readonly>

edited Apr 24 '17 at 11:24

answered Apr 24 '17 at 09:42

vinod joshi

90
8

PsyChip · Answer 45 · 2014-05-22T08:08:34.547

-1

resurrection of thread at two years later. im working around this issue about days and found a simple trick for the prevent this ugly autocomplete feature:

just add a random string to form target like <form action="site.com/login.php?random=123213">

it works on recent chrome version 34.0.1847.137

update: if it does not work, give strange protocol to action like <form id="test" action="xxx://"> and fill this area later with javascript:

$('#test').attr('action', 'http://example.site/login.php');

update 2: still having issues with that, i decided to completely remove the <form> tag and post variables via jquery. its more easy.

edited May 22 '14 at 08:08

answered May 21 '14 at 11:58

PsyChip

89
2
9

Why would you break such patterns users actually ask for? If you think it is ugly, you should rather make it look prettier. Stop breaking patterns that people might find useful, just because you personally dislike it. – Flo Schild Jul 01 '15 at 09:46
just wanted to highlight, answer was sent a decade ago. chrome & chromium developers fixed that issue today. – PsyChip Jul 02 '15 at 19:37

score -2 · Answer 46 · answered Oct 27 '12 at 12:54

-2

It might be a little late but for future referent there is a CSS ONLY solution as Olly Hodgons shows here http://lostmonocle.com/post/1479126030/fixing-the-chrome-autocomplete-background-colour

All you have to do is to add a further selector to overwrite the default input fields setting So use instead of

input:-webkit-autofill {
    background-color: #FAFFBD !important;
}

Somthing like

#login input:-webkit-autofill {
    background-color: #ff00ff;
}

or

form input:-webkit-autofill {
    background-color: #f0f;
}

which seems to work fine with me.

answered Oct 27 '12 at 12:54

Novazembla

152
2
7

2

Doesn't seem to be working in latest Chrome (01/12/2012) : Version 23.0.1271.95 m – Chris Harrison Dec 01 '12 at 06:06
Downvote reason: Doesn't work in the latest Chrome version (01/04/2013) – Simon Arnold Jan 07 '13 at 15:45
While this should work, it sadly actually doesn't =/ – falsarella Jan 21 '16 at 19:23
As of Jan. 2021 all above is ignored for webkit, even if you use !important. – Alex Khimich Jan 30 '21 at 01:39

Removing input background colour for Chrome autocomplete?

46 Answers46

Update 2022

2023 - Transparent background

Linked

Related