在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
当前回答
这对我来说是用来删除字段的黄色背景的:
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:valid,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
-webkit-transition-delay: 99999s;
-webkit-text-fill-color:#D7D8CE;
}
其他回答
这招对我很管用:
padding: 5px;
background-clip: content-box;
这将适用于正常、悬停、聚焦和激活状态下的输入、文本区和选择。
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}
下面是上述解决方案的SCSS版本,供使用SASS/SCSS的人使用。
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
&, &:hover, &:focus, &:active{
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
}
试试这个
input:autofill{
filter:none;
}
基本上,浏览器只是为“自动填充”的输入添加了它自己的过滤器。你的款式在这下面。
如果你想保持自动完成功能完整,你可以使用一点jQuery来删除Chrome的样式。我在这里写了一篇关于它的短文: http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$('input:-webkit-autofill').each(function(){
var text = $(this).val();
var name = $(this).attr('name');
$(this).after(this.outerHTML).remove();
$('input[name=' + name + ']').val(text);
});
});}
这已经被设计,因为这个着色行为已经从WebKit。它允许用户了解已预填充的数据。错误1334
你可以通过以下方式关闭自动完成功能:
<form autocomplete="off">
...
</form
或者你可以通过以下方式改变自动填充的颜色:
input:-webkit-autofill {
color: #2a2a2a !important;
}
请注意,这里有一个正在跟踪的错误,以便再次工作:http://code.google.com/p/chromium/issues/detail?id=46543
这是一个WebKit行为。