Hey there, I could really use some guidance with CSS while working on my project using Next.js 13.4 and Typescript.
Currently, I'm dealing with a form that consists of two input fields for login and password. While testing on Google Chrome and Mozilla, I encountered an issue.
The main problem I'm facing is:
Whenever the browser autofills my details, the CSS styling I applied gets overridden by the browser's default styling.
In order to troubleshoot this issue, I came across the following solution which seemed to work:
input:-webkit-autofill {
-webkit-text-fill-color: black;
-webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0) inset;
transition: background-color 3600s ease-in-out 3600s;
}
While this solution seems satisfactory, I'm curious if anyone else has encountered this problem and knows of a more permanent fix that eliminates the need for such transitions altogether.
Note: Despite attempting to disable autocomplete using autoComplete="off", the browser continued to auto-fill the input fields. Any insights or suggestions to resolve this would be greatly appreciated.