browser auto fill issue with input focus

Question

I have a login form for which browser has saved the user login detail. So when I open this page in the browser it shows me like this

but when I click on the page or press any button

this is the expected default behaviour.

I have tried

document.body.focus()

onload but this is not working.

then I set focus on one of the input(on name) but then what about other field? what is the best solution for this?

I know this fancy styling is not good but is there workaround for this?

Answer 1

I had this exact issue using React and Styled Components. To resolve the issue I used the following css inside my styled component (which was a <label>):

input:-webkit-autofill + &

This works by checking for an autofill in the input and applying our desired styling if true.

Note: You may need to replace & with input.