一個解決chrome瀏覽器下input標籤當autocomplete的時候背景變黃色同時input背景圖片消失方案

標籤：

最近在改一個bug即如標題所講的一樣，chrome瀏覽器下當input標籤開啟autocomplete的時候input的背景顏色變黃同時在input的背景圖片也被覆蓋了。為此百度了好久發現網上說的使用js來append操作，親測了都不管用。除非把autocomplete=“off”關了，但這就不符合需求了

 

網上說的改變-webkit-autofill的陰影背景是可以去除黃色背景的，但是圖片依舊被覆蓋了。

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

試了很多次網上推薦的js來操作都不行後決定改變input的dom結構，即加多一個標籤來訪input的背景圖片後解決了：

HTML：

<p>    <label for="text1">使用者名稱：</label> <span id="tip1" class="icontip"></span> <input autocomplete="" type="text" id="text1" /></p><p>    <label for="text2" style="letter-spacing:5.5px;">密碼：</label><span id="tip2" class="icontip"></span> <input id="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用於覆蓋chrome瀏覽器本身的背景顏色*/        input:-webkit-autofill{            box-shadow: 0 0 0px 1000px #fff inset;        }

最後成功解決

雖然解決了問題，但如果還有其他更好的方式解決的朋友希望一起探討，如有不對的地方歡迎大家指正，謝謝。

一個解決chrome瀏覽器下input標籤當autocomplete的時候背景變黃色同時input背景圖片消失方案