Chrome browser How to remove the default style that the browser automatically adds when the form is automatically populated _javascript tips

First, found that the cause of the problem-is in the account login page, the input form added a background picture, when the automatic filling, rub a lump of light yellow background.

The reason is that I was hastily set directly in the INPUT element, the result of the problem came. So if you put this icon outside of the input form, this problem does not occur.

Second, the form auto fill will add browser default style how to handle and avoid

The second picture is that when the form is automatically populated, chrome defaults to the automatically populated input form with Input:-webkit-autofill private properties

Input:-webkit-autofill, Textarea:-webkit-autofill, Select:-webkit-autofill {
 Background-color:rgb (250, 255, 189 ); /* #FAFFBD; * *
 Background-image:none;
 Color:rgb (0, 0, 0);
}

See here to add this code, I would think of using style overlay method to solve. I can use!important to promote priority. But there's a problem, add! Important Can not overwrite the original background, font color, except the chrome default definition Background-color,background-images,color cannot use

!important promotion priority, which can be used by other attributes to promote the priority level.

Input:-webkit-autofill, Textarea:-webkit-autofill, Select:-webkit-autofill {
 background-color: #FFFFFF;
 Background-image:none;
 Color: #333;
 /*-webkit-text-fill-color:red; This private property is valid *
/}
input:-webkit-autofill:hover {
 /* style code
*
/} Input:-webkit-autofill: Focus {/
 * style code */
}

Ideas have two, 1, by patching, fix bugs. 2, close the browser to fill the form with the function

Story one: The input text box is a solid color background

Solution:

Input:-webkit-autofill {
 -webkit-box-shadow:0 0 0px 1000px white inset;
 -webkit-text-fill-color: #333;
}

Scenario Two: The input text box is using a picture background

Solution:

if (Navigator.userAgent.toLowerCase (). IndexOf ("Chrome") >= 0)
{
 var _interval = Window.setinterval ( function () {
 var autofills = $ (' Input:-webkit-autofill ');
 if (Autofills.length > 0) {
  window.clearinterval (_interval);//Stop polling
  Autofills.each (function () {
  var Clone = $ (this). Clone (True, true);
  $ (this). After (clone). Remove ();}
  );
 }

First determine if it is chrome, if it is, then traverse the Input:-webkit-autofill element, and then through the value, append, remove and other operations to achieve. This method has no effect!!

So finally I do not use the icon as the input form background image, but to write a label, the icon to get out of the form.

Idea two: Close the browser to fill the form with its own function

Set the form properties Autocomplete= "off/on" Turn off automatically populate the form and remember the password yourself

<!--set--> for the entire form
<form autocomplete= "Off" method= "..." action= "..." >
<!--or set--> on a single element
<input type= "text" name= "Textboxname" autocomplete= "Off" >

As shown in figure: Before the automatic filling, the small icon of this mailbox is the background picture of the Inpu form

As shown in figure: After filling, the mailbox small icon is covered by the browser default style

At last

If you don't want to deal with the added default style for the automatic fill of the form in the Chrome browser, put this little icon outside of the form, because it's the input box.

Only Border-bottom, if the input box has a border, you may need to use a div border to pretend to be a border of the input box, and then the input box is made without a border.

An input box like this

Through the above methods to help friends successfully solve the browser automatically add default style problems, small partners can rest assured that the reference to this article.