Home>

Many friends have encountered this problem:when using chrome browser form autofill, the default style is automatically added,How do I remove the default style?See how we remove it,

I found the cause of the problem-when writing the account login page,The input form adds a background image,When auto-filled,A scoop of light yellow background came out.

The reason is that I set it directly in the input element,Then the problem came.So if you put this icon outside the input form,This problem does not occur.

Form auto-fill will add browser default styles how to handle and avoid

The second picture,After the form is automatically filled,Chrome will add input:-webkit-autofill private property to the auto-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);
}
</pre>
</div>
<p>
See here to add this code,I would think of a solution using style overrides.
I can use! Important to raise the priority.
But there is a problem,plus! important cannot cover the original background, font color,Except for chrome's default definition of background-color, background-images, color cannot be used
</p>
<p>
! important raises the priority,It can be used by other attributes to increase priority.
</p>
<div>
<pre>
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. By patching,Fix bugs. 2.Close the browser's built-in fill function

Scenario 1:The input text box has a solid background

Solution:

input:-webkit-autofill {
 -webkit-box-shadow:0 0 0px 1000px white inset;
 -webkit-text-fill-color:#333;
}
</pre>
</div>
<p>
<strong>
Scenario 2:The input text box uses a picture background
</strong>
</p>
<p>
Solution:
</p>
<div>
<pre>
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 it is, iterate over the input:-webkit-autofill element, and then pass the value,Attach, remove and other operations to achieve. This method has no effect! !!

So in the end I did n’t use the icon as the background image of the input form.But write one more tag,Take the icon out of the form.

Idea two:Close the browser's built-in fill function

Set the form property autocomplete="off/on" to turn off the autocomplete form,Implement yourself to remember the password

<!-Set for entire form->

<form autocomplete="off" method=".." action="..">

<input type="text" name="textboxname" autocomplete="off">

Picture:Before auto-fill,At this time, the small icon of this mailbox is the background image of the inpu form.

Figure:After filling, the small mailbox icon is overwritten by the browser's default style

At last,

If you do n’t want to deal with the addition of default styles that appear in forms auto-fill in chrome browsers,Then put this little icon outside the form,Because this is an input box

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

Input box like this

  • Previous Development of Android using Android-query framework (1)
  • Next How to solve phpmyadmin import database file maximum limit of 2048KB