chrome autocomplete break样式选择

Question

我有一个样式选择框，在所有浏览器中都可以正常使用。这是CSS（它包含了许多不同的样式来处理各种浏览器）：

select {
    background-image: url(../img/dropdown.png);
    background-repeat: no-repeat;
    background-position: right center;
    padding-bottom: 6px;
    padding-right: 36px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    -webkit-appearance: none;
    background-color: white;
    border: 1px solid;
    border-right: none;
    border-color: #9da6ab;
    color: #36495a;
    display: inline-block;
    outline: 0;
    margin: 0;
    width: 100%;
    height: 28px;
    padding: 5px 36px 6px 1px;
    text-align: left;
    font-size: 13px;
    font-family: Arial,sans-serif;
    vertical-align: middle;
    -moz-appearance:none;
    text-indent: 0.01px;
    text-overflow: '';
}

select::-ms-expand {
    display:none;
}

html.lt-ie10 select {
    background-image:none;
    height:32px;
    padding-right: 6px;
    border-right: 1px solid;
}

当Chrome自动填充表单（这是您的标准问题名称，地址，国家/地区和信用卡信息表单）时，自动填充的任何字段都会获得淡黄色背景颜色。问题是，它确实设法隐藏了我的background-image指令。如果我滚动页面或点击任何字段，下拉图像会立即返回。

之前：

后：

我的第一个想法是，我只需要选择position:relative和z-index，但这并没有改变任何事情。我想我可以尝试禁用自动完成功能，但这会降低用户的预期体验。然后我想在背景图片上设置!important就可以了，因为Chrome可能正在应用样式表来暂时覆盖我的图像。纳达。通过jQuery将焦点设置在另一个字段（或同一字段）上并不起作用（至少它没有在开发人员工具控制台中）。一个超级丑陋的黑客就是捕获自动完成事件（如果可能的话;不，我不是为此安装jQueryUI），然后使用window.scrollBy(0,1);window.scrollBy(0,-1)快速向上和向下滚动，重新绘制控件而不用强制完整的css刷新（并且，基于控制台测试，实际上似乎没有移动屏幕）。但我无法弄清楚如何捕捉自动完成事件，而我宁愿不在每一个模糊中发射它......即使我在模糊时做到这一点，它仍然无法解决事实上，仅显示自动完成下拉列表的行为会带来黄色背景并打破造型。

我的CSS中有什么东西会导致这种情况发生吗？或者我是否必须依靠Javascript来弥补Chrome在这里的愚蠢？

Answer 1

您可以使用以下方法摆脱黄色背景：

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
    $('input:-webkit-autofill').each(function(){
        var text = $(this).val();
        var name = $(this).attr('name');
        $(this).after(this.outerHTML).remove();
        $('input[name=' + name + ']').val(text);
    });
});
}