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