在我正在处理的一个表单上,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,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    transition: background-color 5000s;
    -webkit-text-fill-color: #fff !important;
}

这基本上相当于透明背景。

尝试隐藏自动填充样式

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    background-color: #FFFFFF !important;
    color: #555 !important;
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #555555 !important;
}

两年后线复活。我围绕着这个问题工作了几天,发现了一个简单的技巧来防止这个丑陋的自动完成功能:

只需添加一个随机字符串来形成目标,如<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。它更容易。

我们有一个场景,其中我们有一个复选框来启用或禁用输入字段。

如果选中复选框,字段将被禁用。一旦复选框未选中,输入字段将被启用。我们可以使用chrome自动填充来填充这些字段,如地址和所有。

在点击返回的复选框后自动填充输入字段被禁用,但Chrome添加的背景字段填充自动填充在我的情况下,这些是城市,州和zip字段

在我不得不做的禁用输入字段中保持透明度

input:disabled:-webkit-autofill,
input:disabled:-webkit-autofill:hover, 
input:disabled:-webkit-autofill:focus, 
input:disabled:-webkit-autofill:active  {
    transition: background-color 5000s;
    -webkit-text-fill-color: #fff !important;
    -webkit-background-clip: text;
    color: white !important;
}

对于使用Compass的用户:

@each $prefix in -webkit, -moz {
    @include with-prefix($prefix) {
        @each $element in input, textarea, select {
            #{$element}:#{$prefix}-autofill {
                @include single-box-shadow(0, 0, 0, 1000px, $white, inset);
            }
        }
    }
}