I have tried everything on stackoverflow but nothing worked, Autofill by google chrome is really mes-CodePudding

I have created a template with a great css, all i need to have is no background-color means transparent background with white font color. but google chrome is messing with my theme. What should I do?

I have tried every single thing that exist on the internet nothing worked for me. Is there any other suggestions? Here is the one of things I tried.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  color: #ffffff !important;
  background-color: transparent !important;
}

CodePudding user response：

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.