在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。

我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。

有可能阻止Chrome改变这些字段的颜色吗?


当前回答

我有个更好的办法。

将背景设置为如下所示的另一种颜色并不能解决我的问题,因为我需要一个透明的输入字段

-webkit-box-shadow: 0 0 0px 1000px white inset;

所以我尝试了一些其他的方法,然后我想到了这个:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

其他回答

2023 -透明背景

对于深色背景上的透明输入背景(浅色文本):

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #ffffff;
}

这已经被设计,因为这个着色行为已经从WebKit。它允许用户了解已预填充的数据。错误1334

你可以通过以下方式关闭自动完成功能:

<form autocomplete="off">
...
</form

或者你可以通过以下方式改变自动填充的颜色:

input:-webkit-autofill {
    color: #2a2a2a !important;
}

请注意,这里有一个正在跟踪的错误,以便再次工作:http://code.google.com/p/chromium/issues/detail?id=46543

这是一个WebKit行为。

可以改变这个盒子的颜色,就像已接受的答案一样。

但是如果你想让背景透明,这个方法是没有用的。然而,有一种方法(或者更确切地说是变通方法)可以让它透明,就像这样:

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    transition: background-color 5000s;
    -webkit-text-fill-color: #fff !important;
}

这基本上相当于透明背景。

Daniel Fairweather的解决方案(移除Chrome自动补全的输入背景色?)(我很想给他的解决方案投票,但仍然需要15个代表)真的很好。有一个非常大的不同,大多数好评的解决方案:你可以保留背景图片!但有一点小改动(只是Chrome检查)

你需要记住,它只适用于可见的领域!

因此,如果您正在为表单使用$.show(),则需要在show()事件之后运行此代码

我的完整解决方案(我有一个显示/隐藏按钮登录表单):

if (!self.isLoginVisible()) {
    var container = $("#loginpage");
    container.stop();
    self.isLoginVisible(true);
    
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
        var documentForms = document.forms;
        
        for (i = 0; i < documentForms.length; i++) {
            for (j = 0; j < documentForms[i].elements.length; j++) {
                var input = documentForms[i].elements[j];

                if (input.type == "text" || input.type == "password" || input.type == null) {
                    var text = input.value;
                    input.focus();
                    var event = document.createEvent('TextEvent');
                    event.initTextEvent('textInput', true, true, window, 'a');
                    input.dispatchEvent(event);
                    input.value = text;
                    input.blur();
                }
            }
        }
    }
} else {
    self.hideLogon();
}

再次抱歉,我更希望它是一个评论。

如果你想要,我可以放一个链接到我使用它的网站。

你可以改变输入框的样式以及输入框内的文本样式:

在这里你可以使用任何颜色,例如白色,#DDD, rgba(102, 163, 177, 0.45)。

但透明在这里行不通。

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

另外,你可以用它来改变文本的颜色:

/*Change text in autofill textbox*/
input:-webkit-autofill{
    -webkit-text-fill-color: yellow !important;
}

建议:不要使用过多的模糊半径在数百或数千。这没有任何好处,而且可能会将处理器负载放在较弱的移动设备上。(也适用于实际的外部阴影)。对于一个普通的20px高度的输入框,30px的“模糊半径”将完美地覆盖它。