When auto-filling inputs, Chrome exposes the following styles for auto-filled fields. How to block or turn off these styles? It is the styles, and not in itself auto-filling.

autofill styles

user-agent Google Chrome styles

And the following code does not disable autofill styles:

input:-webkit-autofill { background-color: transparent !important; }
  • You don't have to want this - Alexey Ten

2 answers 2

This is what MDN says about : -webkit-autofill :

Note: it’s important to :-webkit-autofill style declarations, making hacks.

The styles added by many browsers through the user agent contain !important in the property declaration :-webkit-autofill , prohibiting its rewriting without the intervention of hacks Javascript

You can get out by applying tricks:

1) if the background input should be of any color, but not transparent:

 input:-webkit-autofill { -webkit-box-shadow:0 0 0 50px white inset; /* можно изменить на любой вариант цвета */ -webkit-text-fill-color: #333; }

in this case, we fill the input content by applying the inner shadow of the desired color over the background color set by the user agent stylesheet in Chrome

2) you can set a delay for the background “yellowing” animation for a long period of time, thereby allowing the user to enter their data and not see the yellow background long enough:

 input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; /* выставляется желаемая задержка */ }

Submitted to SO.com: Removing autocomplete background color for Chrome?

  • The first option did not work. The second one worked. Thank. - JamesJGoodwin

Hello! Try through the script

 $("input[type='text']").bind('focus', function() { $(this).css('background-color', 'white'); });

or

 input:focus { background-position: 0 0; }

html

 <body onload="loadPage();">

js

  function loadPage() { if (document.login)//if the form login exists, focus: { document.login.name.focus();//the username input document.login.pass.focus();//the password input document.login.login.focus();//the login button (submitbutton) } }

Here is the link to the source - Answer