Chrome browser How to remove the default style that is automatically added by the browser when the form is automatically populated.

Reference blog from http://segmentfault.com/q/1010000000671971

Chrome browser How to remove the default style that is automatically added by the browser when the form is automatically populated.

first, the cause of the problem-is that when the account login page, the input form added a background image, when automatically filled, rubbing a piece of pale yellow background .

The reason is that I hastily set it directly input inside the element, and the problem comes. So if you put this icon outside of the input form, this problem does not occur.

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

In the second picture, when the form is automatically populated, chrome defaults to the AutoFill input form plus the Input:-webkit-autofill private property

{  background-color: rgb (+, 255, 189)/** *   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 elevate the priority level. But there's a problem, plus! Important cannot overwrite the original background, font color, except chrome DEFAULT definition Background-color,background-images,color cannot use

!important promotion priority, which can be used by other properties to elevate the priority level.

{  background-color: #FFFFFF;   background-image: none;   color: #333;  /* */}{  /**/}{  /* */}

Ideas have two, 1, by patching, fix bugs. 2. Close the browser's own fill form function

Scenario One: The input text box is a solid-color background

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

Scenario Two: The input text box is using the background of the picture

Workaround: 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, if it is chrome, if it is, traverse the Input:-webkit-autofill element, and then do so by taking values, attaching, removing, and so on. This method has no effect!!

So in the end, I didn't use the icon as the background image of the input form, but I wrote a more label and took the icon out of the form.

Idea two: Close the browser's own fill form feature

Set form Properties autocomplete="off/on" turn off AutoFill forms and remember passwords for yourself

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

The small icon for this mailbox is the background image of the Inpu form before it is automatically populated

When populated, the small mailbox icon is overwritten by the default browser style

At last

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

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

The input box like this

Chrome browser How to remove the default style that is automatically added by the browser when the form is automatically populated.