在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。

我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。

有可能阻止Chrome改变这些字段的颜色吗?


当前回答

如前所述,inset -webkit-box-shadow对我来说效果最好。

/* Code witch overwrites input background-color */
input:-webkit-autofill {
     -webkit-box-shadow: 0 0 0px 1000px #fbfbfb inset;
}

更改文本颜色的代码片段:

input:-webkit-autofill:first-line {
     color: #797979;
}

其他回答

这已经被设计,因为这个着色行为已经从WebKit。它允许用户了解已预填充的数据。错误1334

你可以通过以下方式关闭自动完成功能:

<form autocomplete="off">
...
</form

或者你可以通过以下方式改变自动填充的颜色:

input:-webkit-autofill {
    color: #2a2a2a !important;
}

请注意,这里有一个正在跟踪的错误,以便再次工作:http://code.google.com/p/chromium/issues/detail?id=46543

这是一个WebKit行为。

没有一个解决方案对我有效,插入阴影对我不起作用,因为输入有一个半透明的背景覆盖在页面背景上。

所以我问自己,“Chrome如何决定在给定的页面上应该自动填充什么?”

“它会查找输入id、输入名称吗?”表单的id吗?表单动作?”

通过我对用户名和密码输入的实验,我发现只有两种方法会导致Chrome无法找到应该自动填充的字段:

1)将密码输入放在文本输入之前。2)给他们相同的名字和身份证……或者根本没有名字和身份。

页面加载后,用javascript你可以动态地改变页面上输入的顺序,或者动态地给他们他们的名字和id…

Chrome不知道是什么击中了它…自动补全功能失效!

疯狂的黑客,我知道。但这对我很有用。

Chrome 34.0.1807.116, OSX 10.7.5

以上所有的答案都有效,但也有缺点。下面的代码是上述两个答案的融合,工作完美无缺,没有眨眼。

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

之前添加盒子阴影的解决方案对于需要纯色背景的人来说效果很好。添加过渡的另一个解决方案是可行的,但必须设置持续时间/延迟将意味着在某个时候它可能会再次显示。

我的解决方案是使用关键帧代替,这样它将始终显示您选择的颜色。

@-webkit-keyframes autofill {
    0%,100% {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

代码示例:https://codepen.io/-Steve-/pen/dwgxPB

SASS

input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-property: background-color, color