How to remove the default style automatically added by the browser when the form is automatically filled in the Chrome browser_javascript skills

1. The reason for this problem is that when writing the account login page, a background image was added to the input form. When it was automatically filled in, a light yellow background appeared.

The reason for this is that I hastily set it directly in the input element, and the problem came. So if you place this icon outside the input form, this problem will not occur.

2. How to deal with and avoid the browser default style that will be added to form auto-fill

The second picture is that after the form is automatically filled, chrome will add the input:-webkit-autofill private attribute to the automatically filled input form by default

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
 background-color: rgb(250, 255, 189); /* #FAFFBD; */
 background-image: none;
 color: rgb(0, 0, 0);
}

When I see this code added here, I will think of using style override to solve it. I can definitely use !important to increase the priority. But there is a problem, add! important cannot overwrite the original background and font color. Except for chrome's default definition of background-color, background-images, color cannot be used

!important increases the priority. Other attributes can use it to increase the priority.

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
 background-color: #FFFFFF;
 background-image: none;
 color: #333;
 /* -webkit-text-fill-color: red; //这个私有属性是有效的 */
}
input:-webkit-autofill:hover {
 /* style code */
}
input:-webkit-autofill:focus {
 /* style code */
}

There are two ideas. 1. Fix bugs through patching. 2. Turn off the browser’s built-in form filling function

Scenario 1: The input text box has a solid color background

Solution:

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

Scenario 2: The input text box uses 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); // 停止轮询
  autofills.each(function() {
  var clone = $(this).clone(true, true);
  $(this).after(clone).remove();
  });
 }
 }, 20);
}

First determine whether it is chrome. If so, traverse the input:-webkit-autofill element, and then implement it through operations such as value taking, appending, and removing. This method doesn’t work! !

So in the end, I didn’t use the icon as the background image of the input form. Instead, I wrote an extra label and took the icon outside the form.

Idea 2: Turn off the browser’s built-in form filling function

Set the form attribute autocomplete="off/on" to turn off the automatic filling form and remember the password yourself

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

As shown in the picture: After filling, the small mailbox icon is overwritten by the browser's default style

Finally,

If you don’t want to deal with adding the default style when the form is automatically filled in the Chrome browser, then put this small icon outside the form. Mine is because it is an input box

Only border-bottom. If the input box has a border, you may need to use a div border to pretend to be the border of the input box, and then make the input box have no border.

An input box like this

Through the above method, I successfully helped my friends solve the problem of automatically adding default styles in the browser. Friends can refer to this article with confidence.