一個解決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;
        }

最后成功解決

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