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

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

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


当前回答

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

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

其他回答

试试这个: 和上面@Nathan-white的答案一样,只是做了一些小调整。

/* For removing autocomplete highlight color in chrome (note: use this at bottom of your css file). */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: all 5000s ease-in-out 0s;
    transition-property: background-color, color;
}

SASS

input:-webkit-autofill

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

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

只需添加一个随机字符串来形成目标,如<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添加到那些输入字段,并设置值为“”,如果你不需要显示存储数据后加载。

$(document).ready(function () {
    setTimeout(function () {
        var data = $("input:-webkit-autofill");

        data.each(function (i, obj) {
            $(obj).removeClass("input:-webkit-autofill");
            obj.value = "";
        });
    }, 1);          
});

尝试隐藏自动填充样式

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