CODEWITHSUNDEEP
reactjsnext.jstailwind-css
user27040825
user27040825

Reputation: 1

Nextjs - input field turns white when selecting an email

I have this login form in Nextjs using tailwind. When selecting an email(saved in google chrome) the input field turns white. How can I solve this? enter image description here

I tried adding a focus but this didn't solve it.

enter image description here

Upvotes: 0

Views: 43

Answers (1)

nofoundname
nofoundname

Reputation: 114

You can use :autofill CSS pseudo-class when an element has its value autofilled by the browser. However you cannot change the background-color, background-image, or color because many browsers use !important in their :-webkit-autofill style declarations.

That is why I searched a little bit a found another solution using background clip.

input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active {
  background-clip: text;
}

In this way instead of trying to change the background color, we painted background within (clipped to) the foreground text. As I checked MDN documents they are compatible with all browsers.

Check this references for more information:

Upvotes: 0

Related Questions