How to remove the Google Chrome form yellow background autofill
Here is how you can remove the yellow background colour from the Google Chrome autofill when you are styling your textarea and input boxes.
I found this particularly useful when designing my portfolio when I wanted to keep the form experience consistent for my users.
In my example, I want to target the <input> element in my CSS. For Google Chrome, we look into input:-webkit-autofill.
input:-webkit-autofill, input:-webkit-autofill:focus, input:-webkit-autofill:hover {
-webkit-box-shadow: 0 0 0px 1000px color inset;
-webkit-text-fill-color: color;
}
Replace the color value with a colour name or HEX code and place it in your stylesheet and this should do the trick. The above code affects the :focus and :hover as well.
Check out a live example through my Codepen.
Note: I have noticed this code still transitions to the default yellow background for a quick moment. I am still on the lookout to find out how to correct that. If someone knows how to do this, I’d appreciate it if the knowledge could be shared.
