ChatGPT解决这个技术问题 Extra ChatGPT

Removing input background colour for Chrome autocomplete?

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?

The fact that this even has to be asked shows how out of touch with the world Google is.

S
Saurin Dashadia

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.


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.
I didn't need the hover/focus/active pseudo selectors
This dims the highlight for the focus and makes it solid and thin line. Is there a solution for that?
I think browser able to support background-color customization as the autocomplete color really mess up the design looks , for example material design input
Use -webkit-box-shadow: none if working with translucent backgrounds and want to remove it altogether.
N
Nathan White

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

Awesome, I also need a transparent background. PS: don't forget the -webkit-text-fill-color: yellow !important; for text color.
This will still show the autofill background when the input has been hidden/shown with display. Fiddle - Check it out
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.
Great solution.... but why does this work? And why does setting background-color not work? Chrome needs to fix this!!
Use: input:-webkit-autofill { transition: all 0s 50000s; } to delay all style changes
S
Saurin Dashadia

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


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!
This works for Vuetify 2 especially if you set color: inherit
This used to work for me, but in newest chrome(88) it is not. Any ideas why? And updated solution?
T
TylerH

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

Working on: Chrome 83 / 84.0.4147.89, Edge 84.0.522.44

If you decide to re-post my solution, I only ask that you include my name or link to this.


Unfortunately this doesn't work well with inputs with a background-color set
Thanks. Also, does it affect the Bootstrap style in the comment below? @manuel-84 stackoverflow.com/questions/21401766/…
@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
Awesome, -webkit-background-clip: text; + border-radius:.25rem = round corners
To change a color add -webkit-text-fill-color: white !important;
S
Saurin Dashadia

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

I have set an image as background of the input field, this solution removes the yellow shade, but the background image is still hidden
Best solution so far, works great with existing box-shadow for validation
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;
@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.
M
Mohamed Mansour

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.


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.
Some people have the same issue, did you check the bug post? code.google.com/p/chromium/issues/detail?id=1334
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?
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).
Turning off auto complete is a hack not a solution
T
Tamás Pap

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

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.
H
Hannes Schneidermayer

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

S
Saurin Dashadia

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

for the curious, background-color has no effect. The -webkit-box-shadow is the clever bit that overrides the yellow background in Chrome
P
Patrick Fisher

SASS

input:-webkit-autofill

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

This actually worked for me since the accepted answer flashes a pale yellow.
S
Saurin Dashadia

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

I have set an image as background of the input field, this solution removes the yellow shade, but the background image is still hidden
This is the only one working for me in Chrome 83. The most voted one was working 'till Chrome 82.
S
Saurin Dashadia

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


S
StefansArya

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

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.
S
Saurin Dashadia

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

As of now in latest Chrome 50.x.x, IT IS working perfectly fine. Thanks a lot!
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 thanks, I just switched it to a delay. Much nicer.
S
Saurin Dashadia

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

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.
L
Linghua Jin

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.


B
Benjamin

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

This seems to be the best solution, although it blocks Kicksend's mailcheck. Any ideas on how to work this around?
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
2
2ne

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


Ok but as many others solutions this will not allowi to have a transparent background
S
Saurin Dashadia

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

D
Daniel Fairweather

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
j
jedmao

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

L
Laurel

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

S
Saurin Dashadia

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*/
}

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
S
Saurin Dashadia

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.


This is the only one that works in a modern Chrome
S
Saurin Dashadia

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
S
Saurin Dashadia

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.


S
Saurin Dashadia

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

e
ed1nh0

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

i
i_a

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


a
arczi

This worked for me:

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

background-clip: text; worked in Chrome