在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
当前回答
两年后线复活。我围绕着这个问题工作了几天,发现了一个简单的技巧来防止这个丑陋的自动完成功能:
只需添加一个随机字符串来形成目标,如<form action="site.com/login.php?random=123213">
它工作在最新的chrome版本34.0.1847.137
更新:如果它不起作用,给动作奇怪的协议,比如<form id="test" action="xxx://">,然后用javascript填充这个区域:
$('#test').attr('action', 'http://example.site/login.php');
更新2:仍然有问题,我决定完全删除<形式>标签和post变量通过jquery。它更容易。
其他回答
你可以改变输入框的样式以及输入框内的文本样式:
在这里你可以使用任何颜色,例如白色,#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的“模糊半径”将完美地覆盖它。
很简单,只要加上,
autocomplete="new-password"
到密码字段。
这对我来说是有效的(Chrome 76测试)
input:-internal-autofill-selected {
background-color: transparent;
}
这已经被设计,因为这个着色行为已经从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{过渡:background-color 5000 0s ease-in-out 0;}