Search code examples
htmlcssgoogle-chromeautofill

How change input field style when address auto fills

I have stored addresses in my chrome browser, so when I fill in a form, I get the popup like this : enter image description here

and when I select an address, the input fields turn blue like so : enter image description here

How do I change the CSS, so that the inputs fields don't get blue. I tried bellow code already, didn't work :

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 {
  background-color: transparent;
}
Solution

  • You cant do transparent input when you selected autofill suggestions but you can change the color of an input field after autofill suggestion with below CSS:

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

    and you can change the text color of autofill suggestion:

    input:-webkit-autofill {
-webkit-text-fill-color: yellow !important;
}