Chrome form auto-fill minus input yellow background solution

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:

1. Input:-webkit-autofill {
2. Background-color: #FAFFBD;
3. Background-image: none;
4. Color: #000;
5. }

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:

1. Input:-webkit-autofill {
2. -webkit-box-shadow: 0 0 0px 1000px white inset;
3. Border: 1px solid #CCC!important;
4. }

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:

2. Input:-webkit-autofill {
4. -webkit-box-shadow: 0 0 0px 1000px white inset;
6. Border: 1px solid #CCC!important;
8. Height: 27px!important;
10. Line-height: 27px!important;
12. Border-radius: 0 4px 4px 0;
14. }

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:

2. $(function() {
4. if (navigator. UserAgent. toLowerCase(). IndexOf("Chrome") >= 0) {
6. $(window). Load(function() {
8. $(' ul Input:not (Input[type=submit]) '). Each(function() {
10. var outhtml = this . outerHTML;
12. $(this). Append(outhtml);
14. });
16. });
18. }
20. });

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"

Chrome form auto-fill minus input yellow background solution