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

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

1. The cause of this problem is that the background image is added to the input form when the account logon page is written. When the background image is automatically filled, the background is highlighted with a pale yellow background.

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.

<! -- Set the entire form -->
<Form autocomplete = "off" method = "..." action = "...">
<! -- Or set a single element -->
<Input type = "text" name = "textboxname" autocomplete = "off">

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 the border of a div 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.