💭 Change Autocomplete Styles in WebKit Browsers | CSS-Tricks - C...

Change Autocomplete Styles in WebKit Browsers | CSS-Tricks

We got a nice tip from Lydia Dugger via email with a method for changing the styles that WebKit browsers apply to form fields that have been autocompleted.

CSS-Tricks · css-tricks.com

All the hover, select, autofil, focus combinations have left me confused on how to consistently get my form elements styled in dark mode

This snippet from CSS tricks has fixed all the different states for me to give me full control.

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}