How to remove the default style automatically added by the browser when the form is automatically filled in chrome _ javascript tips

Many of my friends have this problem: when chrome browser forms are automatically filled, the default style will be automatically added. How can I remove the default style? Let's take a look at how small series are removed. If you need to learn it together, I. The reason for this problem is that the background image is added to the input form when the account logon page is written. When it is automatically filled, the rubbing of a yellow background came out.

This is because I mistakenly set it directly in the input element, and the result is incorrect. Therefore, if you place this icon outside the input form, this problem will not occur.

Ii. How to deal with and avoid adding the default browser style when the form is automatically filled

In the second figure, chrome adds the private property of input:-webkit-autofill to the automatically filled input form by default after the form is automatically filled.

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

As you can see, add the code above. I will think of a solution that uses style overwrite. I can use it all! Improve the priority of important. But there is a problem. Add! Important cannot overwrite the original background or font color. Except for chrome's default definition of background-color, background-images, color cannot be used.

! Important increases the priority. Other attributes can be used 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; // This private property is valid */} input:-webkit-autofill: hover {/* style code */} input:-webkit-autofill: focus {/* style code */}

There are two ideas: 1. fix bugs by patching. 2. Disable the built-in browser filling form function

Scenario 1: The input text box contains a solid 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 the image 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 () ;}}, 20 );}

First, determine whether it is chrome. If yes, traverse the input:-webkit-autofill element, and then perform operations such as value, append, and remove. This method does not work !!

In the end, I did not use the icon as the background image of the input form. Instead, I wrote another label and took the icon out of the form.

Thought 2: Disable the browser's built-in filling form function

Set the form attribute autocomplete = "off/on" to close the auto-fill form and remember the password.

Before it is automatically filled, the small icon in This mailbox is the background image of the inpu form.

After filling, the mailbox icon is overwritten by the browser's default Style

Finally,

If you do not want to add the default style when the form is automatically filled in the chrome browser, put this small icon out of the Form. Because it is an input box

There is only border-bottom. If the input box has a border, you may need to use a p border to pretend to be the border of the input box, and then the input box is made without a border.

Input box like this

By using the above method, you can solve the problem of automatically adding default styles to your browser. You can refer to this article with confidence.