在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
当前回答
我有一个解决方案,如果你想防止从谷歌chrome的自动填充,但它有点“砍刀”,只是删除类谷歌chrome添加到那些输入字段,并设置值为“”,如果你不需要显示存储数据后加载。
$(document).ready(function () {
setTimeout(function () {
var data = $("input:-webkit-autofill");
data.each(function (i, obj) {
$(obj).removeClass("input:-webkit-autofill");
obj.value = "";
});
}, 1);
});
其他回答
这是我的解决方案,我使用了过渡和过渡延迟,因此我可以在我的输入字段上有一个透明的背景。
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
-webkit-transition-delay: 9999s;
}
我开发了另一个解决方案使用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.
不幸的是,上述解决方案在2016年对我都不起作用(在这个问题提出几年后)
下面是我使用的积极的解决方案:
function remake(e){
var val = e.value;
var id = e.id;
e.outerHTML = e.outerHTML;
document.getElementById(id).value = val;
return true;
}
<input id=MustHaveAnId type=text name=email autocomplete=on onblur="remake(this)">
基本上,它在保存值的同时删除标记,并重新创建它,然后放回值。
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();
}
再次抱歉,我更希望它是一个评论。
如果你想要,我可以放一个链接到我使用它的网站。
谷歌Chrome用户代理阻止开发者的CSS,所以改变自动填充UI必须使用另一个属性,像这样:
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #d500ff inset !important;
/*use inset box-shadow to cover background-color*/
-webkit-text-fill-color: #ffa400 !important;
/*use text fill color to cover font color*/
}