JS solves the problem of yellow background in input After chrome automatically fills in the form

This is a problem that has plagued me for a long time. In Chrome, if a form is set to automatically complete, the user will find a yellow background under the form when entering the form and entering the form page again. For example:

 

After finding it online for a long time, I finally found the perfect solution in this article:

Http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/

 

For a form with solid background, you only need to add the following code in CSS:

Input:-WebKit-AutoFill {
-WebKit-box-Shadow: 0 0 0px 1000px white inset;
}

For example, a form with a white background defines the-WebKit-AutoFill attribute of input and sets a White inner shadow to overwrite the original yellow background.

The form that uses images as the background is a little more complicated. It should be solved using Js. Add the following code to JS:

If (navigator. useragent. tolowercase (). indexof ("Chrome")> = 0 ){
$ (Window). Load (function (){
$ ('Input:-WebKit-AutoFill '). Each (function (){
VaR text = $ (this). Val ();
VaR name = $ (this). ATTR ('name ');
$ (This). After (this. outerhtml). Remove ();
$ ('Input [name = '+ name +'] '). Val (text );
});
});
}

Then perform the test to solve the problem ~~