在Chrome自动完成时去除输入框背景颜色？

Question

在Chrome自动完成时去除输入框背景颜色？

986

我正在处理的一个表单中，Chrome自动填充了电子邮件和密码字段。这没问题，但是Chrome将背景颜色更改为淡黄色，这在我的设计中使用浅色文本和深色背景的表单中会显得非常不协调——我有鲜艳的黄色方框和几乎看不见的白色文本。一旦字段获得焦点，则字段恢复正常。

有没有可能阻止Chrome更改这些字段的颜色？

- DisgruntledGoat

46个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gaurav · Answer 1

我们有一个场景，其中我们有一个复选框来启用或禁用输入字段。

如果选择了复选框，则字段将被禁用。一旦取消复选框，输入字段将被启用。我们可以使用Chrome自动填充来填写诸如地址之类的字段。

当单击复选框以发布自动填充时，输入字段将被禁用，但Chrome会为填充的字段添加背景。在我的情况下，这些是城市、州和邮政编码字段

。

为了保留禁用输入字段中的透明度，我不得不进行以下操作。

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

- aryankarim · Answer 2

我几乎尝试了所有的解决方案，但都没有起作用：

但是这段代码起作用了：

input,
select {
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

信用：github链接

- Joakim Krassman · Answer 3

简单，只需添加，

    autocomplete="new-password"

到密码字段。

- vinod joshi · Answer 4

使用这个方法来检查您的问题是否已解决

<input type="email" id="email" name="email" class="form-control validate" onfocus="this.removeAttribute('readonly');" readonly>

- PsyChip · Answer 5

两年后线程的复活。我围绕这个问题工作了几天，找到了一个简单的技巧来防止这个丑陋的自动完成功能：

只需向表单目标添加一个随机字符串，如<form action="site.com/login.php?random=123213">

它适用于最近的Chrome版本34.0.1847.137

更新：如果不起作用，请给action提供奇怪的协议，如<form id="test" action="xxx://">，然后稍后使用JavaScript填充此区域：

$('#test').attr('action', 'http://example.site/login.php');

更新2：由于仍然存在问题，我决定完全删除<form>标签，并通过jquery发布变量。这样更容易。

- Novazembla · Answer 6

可能有点晚了，但对于未来的参考，Olly Hodgons在这里展示了一种仅使用CSS的解决方案 http://lostmonocle.com/post/1479126030/fixing-the-chrome-autocomplete-background-colour

你所要做的就是添加一个进一步的选择器来覆盖默认输入字段设置，所以使用而不是

input:-webkit-autofill {
    background-color: #FAFFBD !important;
}

类似于

#login input:-webkit-autofill {
    background-color: #ff00ff;
}

或者

form input:-webkit-autofill {
    background-color: #f0f;
}

这似乎对我来说运行良好。