Chrome form AutoFill causes the input text box background to turn yellow problem resolution

When the Chrome form is automatically populated, the background of the input text box turns yellow, because chrome defaults to the AutoFill input form plus the Input:-webkit-autofill private property, which is then given the following style:

Copy CodeThe code is 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 the image background for the input text box, the original rounded corners and borders are covered:

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

You can overwrite the yellow background of the input box with a solid-color inner shadow that is large enough for the Input:-webkit-autofill:

Copy CodeThe code is as follows:
Input:-webkit-autofill {
-webkit-box-shadow:0 0 0px 1000px white inset;
border:1px solid #CCC!important;
}

If you have properties that use rounded corners, or if you find the height of the input box to be less than right, you can adjust it, except that Chrome's default definition of Background-color,background-image,color cannot elevate its priority by!important , other properties can use!important to elevate their priority, such as:

Copy CodeThe code is 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 the background of the picture

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

Copy CodeThe code is 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 traversed object may have to be adjusted to your needs. If you do not want to use JS, OK, on the form label directly closed the form's AutoFill function: autocomplete= "off".

Some tests about the way the internet vibe doesn't work

This problem has been bothering me for a long time, there are 2 main ways to write online: the first is to rewrite background-color and color in the style for Input:-webkit-autofill, using!important to increase its priority. The second is to use jquery, first to determine whether Chrome, if it is, then traverse the Input:-webkit-autofill element, and then by the value, append, remove and other operations to achieve.

But my test found that neither of these methods worked! It is not known that with the chrome version of the upgrade, now Chrome (27) does not support rewriting the original properties of Input:-webkit-autofill, or what is going on. In addition JS can not get to Chrome autofill form value value, so the online vibe using jquery to solve the method is not effective, at most can only remove the yellow background, and the auto-filled value is removed. The value of the Chrome autofill form is present in the div in documentfragment, and if any child shoes know how to get the value of the Chrome autofill form, please comment.

Chrome form AutoFill causes the input text box background to turn yellow problem resolution