Question:

Before automatic filling:

After automatic filling:

After auto-filling, the input background color becomes white.

1 Solid shade overlays the background color

input:-webkit-autofill { box-shadow: 0 0 0 1000px #333333 inset; -webkit-text-fill-color: #fff; } Note: One problem with this method is that the input box cannot have a border-radius and only works with solid background boxes.Copy the code

As you can see, there is a distinct white on both sides…

2. Set transparency:

    input:-internal-autofill-previewed,
    input:-internal-autofill-selected {
        -webkit-text-fill-color: #807c7c;
        transition: background-color 5000s ease-out 0.5s;
    }
Copy the code

Effect:

3. Use animation lag

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
	transition-delay: 99999s;
    transition: color 99999s ease-out, background-color 99999s ease-out;
    -webkit-transition-delay: 99999s;
    -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
    -webkit-text-fill-color: #807c7c;
}
Copy the code

Effect:

The latter two are recommended