Removing input background colour for Chrome autocomplete?

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.

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

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