我如何阻止铬从黄变我的网站的输入盒子？

https://stackoverflow.com/questions/175951

05-07-2019
|

题

除其他文本和视觉教上的一种形式提交，后验证，我色我的输入输框红色表示的互动地区需要的注意。

对铬(和谷歌工具栏用户)自动填补功能重新颜色我的输入形成黄色。这里的复杂问题：我想自动完成允许在我的形式，作为它加速的用户登录。我要检查进入的能力把自动完成的属性，如果/当有一个错误触发的，但它是一个复杂的位的编码来编程方式关闭自动完成的单个受影响的输入一个网页。这样，简单地说，将是一个主要头痛的问题。

所以要尽量避免这一问题，是否有任何简单的方法停止铬的重新着色输入盒子？

[编辑]我尝试了!重要的以下建议和它没有任何效果。我还没有检查谷歌工具栏上看到如果!重要的属性会的工作。

尽我所知，没有任何其他手段不是使用自动完成的属性(其中不会出现工作)。

解决方案

我知道在火狐可以使用的属性自动完成="关闭"到禁止的自动完成的功能。如果这个工作在铬(没有测试过的)，可以设置这种特性时，一个错误。

这可以用于两个单元

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

...以及为整个形式

<form autocomplete="off" ...>

其他提示

将CSS outline属性设置为none。

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

如果浏览器也可以添加背景颜色，可以通过类似

的方式修复

:focus { background-color: #fff; }

这正是你要找的！

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

通过使用一些jQuery，您可以删除Chrome的样式，同时保持自动完成功能不变。我在这里写了一篇关于它的简短帖子： http://www.benjaminmiles.com/2010 / 11 /第22 /定影谷歌-铬合金 - 黄色 - 自动完成的样式与 - 的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);
    });
});}

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

*：focus {outline：none; }



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

  .nohighlight：focus {outline：none; }  


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

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


（来自Bill Beckelman：使用CSS覆盖Chrome在活动字段周围的自动边框）



	
		
	
	
			是的，这将是一个令人头痛的问题，我认为这不值得回报。也许你可以稍微调整一下你的UI策略，而不是将盒子着色为红色，你可以将边框着色为红色，或者在它旁边放一个小的红色胶带（如gmails“Loading”胶带），当盒子是盒子时，它会逐渐消失。聚焦。
	


	
		
	
	
			 jQuery是一块蛋糕：

if ($.browser.webkit) {
    $("input").attr('autocomplete','off');
}


或者，如果您想要更具选择性，请为选择器添加类名。
	


	
		
	
	
			我认为更简单的方法是：


获取 http://www.quirksmode.org/js/detect.html  
 使用此代码：

if (BrowserDetect.browser == "Chrome") {
  jQuery('form').attr('autocomplete','off');
};
 
	


	
		
	
	
			在应用@Benjamin他的解决方案后，我发现按下后退按钮仍然会给我黄色突出显示。

我的解决方案以某种方式来防止这个黄色突出显示回来是通过应用以下jQuery javascript：

<script type="text/javascript">
    $(function() {
        if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
        var intervalId = 0;
            $(window).load(function() {
                intervalId = setInterval(function () { // << somehow  this does the trick!
                    if ($('input:-webkit-autofill').length > 0) {
                        clearInterval(intervalId);
                        $('input:-webkit-autofill').each(function () {
                            var text = $(this).val();
                            var name = $(this).attr('name');
                            $(this).after(this.outerHTML).remove();
                            $('input[name=' + name + ']').val(text);
                        });
                    }
                }, 1);
            });
        }
    });
</script>


希望它对任何人都有帮助!! 
	


	
		
	
	
			这很有效。最重要的是，你可以使用rgba值（box-shadow inset hack不适用于rgba）。这是对本杰明回答的轻微调整。我使用$（document）.ready（）而不是$（window）.load（）。它对我来说似乎更好 - 现在FOUC要少得多。我不相信使用$（document）.ready（）。有缺点

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(document).ready(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);
        });
    });
};
	


	
		
	
	
			对于今天的版本，如果置于两个登录输入中的一个中，这也有效。还要修复版本40+和后期Firefox问题。

<input readonly="readonly" onfocus="this.removeAttribute('readonly');" />
	


	
		
	
	
			input:focus { outline:none; }


这对我来说非常有用，但更有可能在您的网站上保持统一，您还希望将其包含在CSS for textareas中：

textarea:focus { outline:none; }


对大多数人来说，这似乎是显而易见的，但对于初学者，你也可以将它设置为一种颜色：

input:focus { outline:#HEXCOD SOLID 2px ; }
	


	
		
	
	
			如果我没记错的话，样式表中输入背景颜色的重要规则将覆盖Google工具栏自动填充功能 - 可能与Chrome相同。



	
		
			许可以下： CC-BY-SA 和 归因
			不隶属于 StackOverflow