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 ~~