Autofill background color turn to white - How to change this?

Community resources
1

Screen Shot 2022-03-20 at 17.48.38
Screen Shot 2022-03-20 at 17.48.383230Ă—2196 152 KB

I created a contact form on my portfolio page. When autofill is used background color turns to white. How to change transparent color?

1 Like
2

Did you find any solution for this? I have the same problem/question :slight_smile:

3

In the page that is your form, put this code “before tag” place.
Important: this code is not removing or changing the autofill background, it’s there but it will need 5000 seconds to appears. The feeling is that it is transparent.

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

In this case I use the white text color in this form, if in your case is different, you can change the webkit-text-fill-color: #fff to another one in hex code that you want

5 Likes
4

Thanks for this code @Shinji_Miyoshi! Worked like a charm.

5

The following snippet may help

<style>
  input:-webkit-autofill,
  input:-webkit-autofill:hover, 
  input:-webkit-autofill:focus, 
  input:-webkit-autofill:active  {
    color : black !important;
    -webkit-text-fill-color: black !important;
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
  }
</style>
2 Likes
6

Hey @Shinji_Miyoshi Thanks for your code