The Chrome form Auto fill causes the input text box background to become yellowish problem resolution

When the Chrome form is automatically populated, the background of the input text box turns yellow, because chrome defaults to the automatically populated input form with the Input:-webkit-autofill private attribute, and then gives it the following style:

Copy Code code as follows:


Input:-webkit-autofill {


Background-color: #FAFFBD;


Background-image:none;


color: #000;


}

In some cases, this yellow background will affect the effect of our interface, especially when we use a picture background for the input text box, the original rounded corners and borders are covered:

story One: The input text box is a solid color background

You can use a solid-color inner shadow large enough for Input:-webkit-autofill to overwrite the yellow background of the input box;

Copy Code code as follows:


Input:-webkit-autofill {


-webkit-box-shadow:0 0 0px 1000px white inset;


border:1px solid #CCC!important;


}

If you have an attribute with rounded corners, or if you find that the length of the input box is not too high, you can adjust it, except that the chrome default definition of Background-color,background-image,color cannot be upgraded with!important. , other properties can use!important to elevate their priority, such as:

Copy Code code as follows:


Input:-webkit-autofill {


-webkit-box-shadow:0 0 0px 1000px white inset;


border:1px solid #CCC!important;


height:27px!important;


line-height:27px!important;


border-radius:0 4px 4px 0;


}

Scenario Two: The input text box is using a picture background

This is more trouble, there is no perfect solution, there are two options:
1, if your picture background is not too complex, only some simple inner shadow, that person feel can use the method described above to use a large enough solid color inside the shadow to cover off the yellow background, this time is only without the original inner shadow effect bale.
2, if you really want to retain the original inner shadow effect, it can only sacrifice the function of chrome automatically fill the form, use JS to achieve, for example:

Copy Code code as follows:


$ (function () {


if (Navigator.userAgent.toLowerCase (). IndexOf ("Chrome") >= 0) {


$ (window). Load (function () {


$ (' ul Input:not (Input[type=submit]) '). each (function () {


var outhtml = this.outerhtml;


$ (this). Append (outhtml);


});


});


}


10.});

The objects you traverse may have to be adjusted to suit your needs. If you do not want to use JS, OK, on the form label directly off the form's automatic fill function: autocomplete= "off."

some tests on the way the online vibe doesn't work

This problem has plagued me for a long time, online writing methods are mainly 2: the first is in the style of Input:-webkit-autofill rewrite background-color and color, use!important to improve its priority. The second is to use jquery, first to determine whether it is chrome, if it is, then traverse the Input:-webkit-autofill element, and then through the value, append, remove and other operations to achieve.

But my test found that neither of these methods worked! I do not know that with the chrome version of the upgrade, now the Chrome (27) has not supported the rewrite Input:-webkit-autofill original attributes, or what is going on. In addition JS can not get to the chrome automatically fill the form of value, so the online rumors of the use of jquery solution is not working, the most can only remove the yellow background, and the value of the automatic fill is removed. The value of a form that is automatically populated by Chrome is present in the DocumentFragment Div, and if any of the children's shoes know how to get the value of the form that is automatically populated by Chrome, please advise.