在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
当前回答
试试这个
input:autofill{
filter:none;
}
基本上,浏览器只是为“自动填充”的输入添加了它自己的过滤器。你的款式在这下面。
其他回答
我有一个解决方案,如果你想防止从谷歌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);
});
更新2022
2022年更新后工作:
input:-webkit-autofill,
input:-webkit-autofill:focus {
transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted] {
background-color: transparent !important;
}
这是我的解决方案,我使用了过渡和过渡延迟,因此我可以在我的输入字段上有一个透明的背景。
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.
这招对我很管用:
padding: 5px;
background-clip: content-box;