jquery - chrome 自动完成中断样式选择

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 将焦点设置在另一个字段(或同一字段)上不起作用(至少它在开发人员工具控制台中不起作用)。一个 super 丑陋的 hack 是捕捉那个自动完成事件(如果可能的话；不，我不是为此安装 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);
    });
});
}