A trick to change the autocomplete background-color

Story

When I worked on a project as a front end developper I found myself stuck with a little issue, the website was black on the background and when a user would use the input,the autocomplete would turn the box to white background, So I decided to look up on google to find an explanation, it seems that the chrome agent won't let you change your background, so I had to find a new way, here's the solution

The solution

 css
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1b1b1b inset !important;
  -webkit-text-fill-color: white !important;
}

What we've done here is simply select the pseudo element Autofill and then apply a huge box shadow inside of it, so the background would be covered by the Box shadow inset

And then I changed the text-fill-color to white

And the result is:

👍 I hope this post helps you with this CSS property

Comments

[Adrian Valenzuela]

Thanks man! That did the trick.