如何阻止Chrome使我网站的输入框变黄？

Question

在表单提交,验证后的其他文本和视觉辅助工具中,我将输入框着色为红色以表示需要注意的交互区域.

在Chrome(以及Google工具栏用户)上,自动填充功能会将输入表单重新着色为黄色.这是一个复杂的问题:我想在我的表单上允许自动完成,因为它可以加速用户登录.我将检查是否/当触发错误时将自动完成属性关闭,但它是一个复杂的一点编码以编程方式关闭页面上单个受影响输入的自动完成.简而言之,这将是一个令人头疼的问题.

因此,为了避免这个问题,有没有更简单的方法阻止Chrome重新着色输入框？

[编辑]我尝试了下面的!重要建议,它没有任何效果.我还没有检查Google工具栏,看看!important属性是否适合.

据我所知,除了使用自动完成属性(看起来确实有效)之外,没有任何其他方法.

Answer 1

将CSS outline属性设置为none.

input[type="text"], input[type="password"], textarea, select { 
    outline: none;
}

在浏览器可能添加背景颜色的情况下,这可以通过类似的东西来修复

:focus { background-color: #fff; }

Answer 2

我知道在Firefox中你可以使用属性autocomplete ="off"来禁用自动完成功能.如果这在Ch​​rome中有效(尚未测试),则可以在遇到错误时设置此属性.

这可以用于单个元素

<input type="text" name="name" autocomplete="off">

......以及整个表格

<form autocomplete="off" ...>

Answer 3

这正是你要找的!

// Just change "red" to any color
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px red inset;
}

Answer 4

通过使用一些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);
    });
});}

Answer 5

要删除所有字段的边框,您可以使用以下内容:

*:focus { outline:none; }

要删除选择字段的边框,只需将此类应用于所需的输入字段:

.nohighlight:focus { outline:none; }

您当然可以根据需要更改边框:

.changeborder:focus { outline:Blue Solid 4px; }

(来自Bill Beckelman:使用CSS覆盖Chrome在活动字段周围的自动边框)