1

It seems that the current way to change the background-color of an input that is autofilled (username is my example bellow) by the browser is by using a transition:

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

}

#input-container input{
    display: block;
    background-color: transparent;
}

This is working but is there any cleaner way to do it whiteout having to create a transition?

example form

James
  • 31
  • 1
  • 5
  • `transition` does not change the background color. That's what `background-color` is for. `transition` just creates an animation when a property changes. – Jacob Lockard Jan 18 '20 at 21:25
  • This is not what I am saying. transition has to be on the code for most of the solutions. Reference: https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete – James Jan 18 '20 at 21:28
  • I see, that makes more sense. – Jacob Lockard Jan 18 '20 at 21:33

1 Answers1

-3

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;
}
Yonas Yenew
  • 1
  • 1
  • 2
    Please don't post code-only answers. Future readers will be grateful to see explained *why* it answers the question instead of having to infer it from the code. – Gert Arnold Mar 20 '22 at 20:06
  • 1
    As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 21 '22 at 04:13