在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
当前回答
这已经被设计,因为这个着色行为已经从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;}
我开发了另一个解决方案使用JavaScript没有JQuery。如果你觉得这有用或决定重新发布我的解决方案,我只要求你包括我的名字。享受。——丹尼尔·费尔韦瑟
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();
}
}
}
This code is based on the fact that Google Chrome removes the Webkit style as soon as additional text is entered. Simply changing the input field value does not suffice, Chrome wants an event. By focusing on each input field (text, password), we can send a keyboard event (the letter 'a') and then set the text value to it's previous state (the auto-filled text). Keep in mind that this code will run in every browser and will check every input field within the webpage, adjust it accordingly to your needs.
这可能有点晚了,但对于未来的参考,有一个CSS唯一的解决方案,Olly Hodgons在这里展示 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;
}
or
form input:-webkit-autofill {
background-color: #f0f;
}
这对我来说似乎很管用。
两年后线复活。我围绕着这个问题工作了几天,发现了一个简单的技巧来防止这个丑陋的自动完成功能:
只需添加一个随机字符串来形成目标,如<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。它更容易。
我们可以使用-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;
}