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

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

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


当前回答

这可能有点晚了,但对于未来的参考,有一个CSS唯一的解决方案,Olly Hodgons在这里展示 http://lostmonocle.com/post/1479126030/fixing-the-chrome-autocomplete-background-colour

您所要做的就是添加一个进一步的选择器来覆盖默认的输入字段设置 所以用而不是

input:-webkit-autofill {
    background-color: #FAFFBD !important;
}

#login input:-webkit-autofill {
    background-color: #ff00ff;
}

or

form input:-webkit-autofill {
    background-color: #f0f;
}

这对我来说似乎很管用。

其他回答

input:-webkit-autofill {
    border: none;
    border-radius: .3rem;
    caret-color: #fff; /* Pour le I quand on édite */
    color: #fff;
    background: #292a2d;
    /* webkit autofill */
    -webkit-text-fill-color: #fff; /* Surcharge la font color d'autofill */
    -webkit-background-clip: text; /* Supprime le background autofill, utile pour le border radius */
    box-shadow: 0 0 0 50px #292a2d inset; /* Ajoute un fake background à base d'ombrage aplatit */
}

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

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;
}

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

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

如前所述,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;
}

这招对我很管用:

padding: 5px;
background-clip: content-box;