在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
当前回答
我们可以使用-webkit-autofill伪选择器来定位这些字段,并按照我们认为合适的方式设置它们的样式。默认样式只影响背景颜色,但大多数其他属性都适用于此,例如border和font-size。我们甚至可以使用-webkit-text-fill-color来更改文本的颜色,下面的代码片段中包含了它。
/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: 1px solid green;
-webkit-text-fill-color: green;
-webkit-box-shadow: 0 0 0px 1000px #000 inset;
transition: background-color 5000s ease-in-out 0s;
}
其他回答
可以改变这个盒子的颜色,就像已接受的答案一样。
但是如果你想让背景透明,这个方法是没有用的。然而,有一种方法(或者更确切地说是变通方法)可以让它透明,就像这样:
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;
}
这基本上相当于透明背景。
这已经被设计,因为这个着色行为已经从WebKit。它允许用户了解已预填充的数据。错误1334
你可以通过以下方式关闭自动完成功能:
<form autocomplete="off">
...
</form
或者你可以通过以下方式改变自动填充的颜色:
input:-webkit-autofill {
color: #2a2a2a !important;
}
请注意,这里有一个正在跟踪的错误,以便再次工作:http://code.google.com/p/chromium/issues/detail?id=46543
这是一个WebKit行为。
我们有一个场景,其中我们有一个复选框来启用或禁用输入字段。
如果选中复选框,字段将被禁用。一旦复选框未选中,输入字段将被启用。我们可以使用chrome自动填充来填充这些字段,如地址和所有。
在点击返回的复选框后自动填充输入字段被禁用,但Chrome添加的背景字段填充自动填充在我的情况下,这些是城市,州和zip字段
在我不得不做的禁用输入字段中保持透明度
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;
}
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-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;
}