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

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.