How to remove input background filling after autocomplete in Chrome

Hi guys,

Thank you for your help so far. I've achieved pretty much what I intended to do.
However, there's one more problem.
When I choose to use autocomplete in Chrome, the input field as filled with background color and blocked the visibility of background image. This isn't happened in Firefox.

Can you guys find the attached image and give me any idea how to fix or disabled it. I've searched the internet for a clue without any luck.

Thanks in advance,

 

<input type="text" name="Name" placeholder="First Name" autocomplete="off">

OR if you want only the background:

https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
-webkit-box-shadow: 0 0 0 30px white inset !important;
}

/*Change text in autofill textbox*/
input:-webkit-autofill{
-webkit-text-fill-color: yellow !important;
}

 

I've found a solution here: https://webagility.com/posts/the-ul...ced-yellow-background-on-autocompleted-inputs

They put a wrapper around the input and have a background image on the wrapper.

 

Found more solution, more modern: https://www.geeksforgeeks.org/css-to-put-icon-inside-an-input-element-in-a-form/