一个解决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;
        }

最后成功解决

虽然解决了问题，但如果还有其他更好的方式解决的朋友希望一起探讨，如有不对的地方欢迎大家指正，谢谢。

转载于:https://www.cnblogs.com/leungUwah/p/5428969.html