A solution to the Chrome browser input tag when the background turns yellow while AutoComplete and the input background image disappears

Source: Internet
Author: User

Recently in a bug as described in the title, Chrome browser when the input tag opens AutoComplete, the background color of input is yellow and the background image of input is also overwritten. For this reason Baidu a long time to find online said using JS to append operation, the pro-test is not working. Unless the autocomplete= "off" is turned off, it doesn't fit the demand.

Web-based changes-webkit-autofill the background of the shadow can be removed from the yellow background, but the picture is still covered.

Input:-webkit-autofill {     box-shadow:0 0 0px 1000px #fff inset;  }

Tried many times on-line recommended JS to operate after the decision to change the DOM structure of input, that is, add a tag to visit the background image of input to solve:

Html:

<P>    <label for= "Text1">User name:</label> <spanID= "Tip1"class= "Icontip"></span> <inputAutoComplete=""type= "text"ID= "Text1" /></P><P>    <label for= "Text2"style= "letter-spacing:5.5px;">Password:</label><spanID= "TIP2"class= "Icontip"></span> <inputID= "Text2"type= "Password"/></P>

Css:

input{width:200px;Height:30px;}#text1, #text2{padding:2px 2px 2px 26px; }. BTN{text-align:Center;width:120px;Height:30px;Background-color:Cornflowerblue;Border-radius:3px;Color:#fff;font-family:' Microsoft Yahei ';font-size:15px; }. Icontip{Display:Inline-block;Height:30px;width:30px;position:Absolute;background:url (' image/input.png ') no-repeat; }#tip1{background-position:4px-62px;}#tip2{background-position:4px-141px;}/*-webkit-autofill to overwrite the background color of the Chrome browser itself*/Input:-webkit-autofill{Box-shadow:0 0 0px 1000px #fff inset; }

Finally successfully solved

Although solved the problem, but if there are other better ways to solve the friend hope to discuss together, if there is not the place to welcome everyone to correct, thank you.

A solution to the Chrome browser input tag when the background turns yellow while AutoComplete and the input background image disappears

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.