1

Hi guys, i need some help with css and i'm using Next.js 13.4 with Typescript.

Basically I have a form with two inputs, login and password, and to do tests I'm using Google Chrome and Mozilla.

This is the problem i'm facing:

Input trouble

When the browser autofills my credentials my css is replaced by the browser.

To resolve this I searched and found this solution which worked fine:

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

For me this solution is ok, but I would like to know if anyone has had this problem and would know how to solve it in a way that I don't even need to "worry" with this transition, you know, any solution that I really wouldn't even need to have this transition, or any other better than that.

Obs: As much as I don't mind the browser auto filling the input, but I even tried to put an autoComplete="off" but even that didn't solve it because the browser kept filling it in, if anyone can help me with that too I would appreciate it.

Alisson Lourenço
  • 11
  • 1

1 Answers1

0

I think the below answer is suitable for you

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

let me know if this is not satisfy you.

logesh sankar
  • 233
  • 2
  • 8