在我正在处理的表单上,Chrome浏览器会自动填写电子邮件和密码字段。很好,但是Chrome将背景颜色更改为浅黄色。
我正在研究的设计是在深色背景上使用浅色文本,因此这确实弄乱了表单的外观-我有明显的黄色框和几乎看不见的白色文本。聚焦后,场将恢复正常。
是否可以停止Chrome更改这些字段的颜色?
在我正在处理的表单上,Chrome浏览器会自动填写电子邮件和密码字段。很好,但是Chrome将背景颜色更改为浅黄色。
我正在研究的设计是在深色背景上使用浅色文本,因此这确实弄乱了表单的外观-我有明显的黄色框和几乎看不见的白色文本。聚焦后,场将恢复正常。
是否可以停止Chrome更改这些字段的颜色?
Answers:
这可以正常工作,您可以在输入框内更改输入框样式以及文本样式:
在这里,你可以使用任何颜色例如white
,#DDD
,rgba(102, 163, 177, 0.45)
。
但是transparent
不会在这里工作。
/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px white inset !important;
}
此外,您可以使用它来更改文本颜色:
/*Change text in autofill textbox*/
input:-webkit-autofill {
-webkit-text-fill-color: yellow !important;
}
建议:不要使用成百上千的模糊半径。这没有任何好处,并且可能会使处理器负载在较弱的移动设备上。(对于实际的外部阴影也是如此)。对于高度为20px的普通输入框,可以完美覆盖30px的“模糊半径”。
:-internal-autofill-previewed
和:-internal-autofill-selected
伪类而不是-webkit-autofill
...。但是,-webkit-autofill
仍然可以神秘地工作。我个人不需要!important
。
先前添加盒形阴影的解决方案非常适合需要纯色背景的人。添加过渡的另一种解决方案是可行的,但是必须设置持续时间/延迟意味着它将在某个时候再次显示。
我的解决方案是改用关键帧,这样它将始终显示您选择的颜色。
@-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;
}
Codepen示例:https://codepen.io/-Steve-/pen/dwgxPB
color: inherit
我有一个更好的解决方案。
将背景设置为如下所示的另一种颜色并不能解决我的问题,因为我需要一个透明的输入字段
-webkit-box-shadow: 0 0 0px 1000px white inset;
因此,我尝试了其他一些方法,然后想到了:
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
}
-webkit-text-fill-color: yellow !important;
输入文字颜色。
transition-duration
荒谬的高值,不如将其设置为高transition-delay
。这样,您甚至可以进一步减少颜色变化的可能性。
transition
黑客只会工作如果输入不会自动填充浏览器记录的默认项,否则黄色背景仍然会在那里。
background-color
不起作用?Chrome需要解决此问题!!
这是我的解决方案,我使用了过渡和过渡延迟,因此我可以在输入字段上使用透明背景。
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
-webkit-transition-delay: 9999s;
}
box-shadow
的验证一起使用
"color 9999s ease-out, background-color 9999s ease-out";
无效。然后,我使用了代码,-webkit-transition: background-color 9999s ease-out;
以及-webkit-text-fill-color: #fff !important;
box-shadow
验证如何配合使用?在我的情况下,由于此css规则,我的自定义红色框阴影(指示输入错误)被延迟,使用户认为最新输入实际上是好的,但它是无效的。
由于这种着色行为来自WebKit,因此已按设计进行了设计。它使用户可以了解已预填充的数据。错误1334
您可以执行以下操作(或在特定的表单控件上关闭自动完成功能:
<form autocomplete="off">
...
</form
或者,您可以通过执行以下操作来更改自动填充的颜色:
input:-webkit-autofill {
color: #2a2a2a !important;
}
请注意,正在跟踪一个错误,该错误可以再次运行:http : //code.google.com/p/chromium/issues/detail?id=46543
这是WebKit的行为。
!important
并且(b)设置了具有较高特异性的ID作为目标。Chrome似乎总是会覆盖它。删除自动完成功能似乎确实可行,但实际上不是我想要执行的操作。
autocomplete="off"
无疑会引发可访问性问题。为什么答案总是被标记为正确的?
目前可能的解决方法是在内部阴影中设置“强”的阴影:
input:-webkit-autofill {
-webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
-webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
-webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
-webkit-text-fill-color: #333;
}
试试这个隐藏自动填充样式
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;
}
以上所有答案均有效,但确实有其错误。以下代码是上述两个答案的结合,可以完美工作而不会闪烁。
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;
}
萨斯
input:-webkit-autofill
&,
&:hover,
&:focus,
&:active
transition-delay: 9999s
transition-property: background-color, color
除此之外:
input:-webkit-autofill{
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
您可能还想添加
input:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px rgba(82, 168, 236, 0.6);
}
否则,当您单击输入时,黄色将重新出现。对于焦点,如果您使用的是引导程序,则第二部分用于突出显示边框0 0 8px rgba(82,168,236,0.6);
这样,它将看起来像任何引导输入。
我有一个问题,我无法使用阴影框,因为我需要输入字段透明。这有点hack,但是纯CSS。将过渡设置为非常长的时间。
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
}
transition-duration
荒谬的高值,不如将其设置为高transition-delay
。这样,您甚至可以进一步减少颜色变化的可能性。
试试这个:与上面的@ 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;
}
如果您想保持自动完成功能不变,可以使用一些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);
});
});}
我已经开发了使用JavaScript而不使用JQuery的另一种解决方案。如果您觉得这有用或决定重新发布我的解决方案,我只要求您输入我的名字。请享用。–丹尼尔·费尔威瑟
var documentForms = document.forms;
for(i = 0; i < documentForms.length; i++){
for(j = 0; j < documentForms[i].elements.length; j++){
var input = documentForms[i].elements[j];
if(input.type == "text" || input.type == "password" || input.type == null){
var text = input.value;
input.focus();
var event = document.createEvent('TextEvent');
event.initTextEvent('textInput', true, true, window, 'a');
input.dispatchEvent(event);
input.value = text;
input.blur();
}
}
}
此代码基于以下事实:输入其他文本后,Google Chrome就会删除Webkit样式。仅仅更改输入字段的值是不够的,Chrome需要一个事件。通过关注每个输入字段(文本,密码),我们可以发送键盘事件(字母“ a”),然后将文本值设置为其先前的状态(自动填充的文本)。请记住,此代码将在每个浏览器中运行,并将检查网页中的每个输入字段,并根据您的需要进行调整。
这将适用于输入,文本区域,并在正常,悬停,焦点和活动状态下进行选择。
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active,
{
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
这是针对使用SASS / SCSS的人员的上述解决方案的SCSS版本。
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill
{
&, &:hover, &:focus, &:active
{
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
}
如果您想防止Google chrome自动填充但它有点“弯刀”,我有一个解决方案,只需删除google chrome添加到这些输入字段的类,然后将值设置为“”即可(如果您不需要显示)加载后存储数据。
$(document).ready(function () {
setTimeout(function () {
var data = $("input:-webkit-autofill");
data.each(function (i,obj) {
$(obj).removeClass("input:-webkit-autofill");
obj.value = "";
});
},1);
});
Daniel Fairweather的解决方案(删除Chrome自动完成功能的输入背景色?)(我很想赞成他的解决方案,但仍需要15个代表)效果很好。大多数提议的解决方案之间确实存在巨大差异:您可以保留背景图片!但是稍作修改(只需Chrome检查)
您需要记住,它仅适用于可见区域!
因此,如果您在表单中使用$ .show(),则需要在show()事件之后运行此代码。
我的完整解决方案(我有一个用于登录表单的显示/隐藏按钮):
if (!self.isLoginVisible()) {
var container = $("#loginpage");
container.stop();
self.isLoginVisible(true);
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
var documentForms = document.forms;
for (i = 0; i < documentForms.length; i++) {
for (j = 0; j < documentForms[i].elements.length; j++) {
var input = documentForms[i].elements[j];
if (input.type == "text" || input.type == "password" || input.type == null) {
var text = input.value;
input.focus();
var event = document.createEvent('TextEvent');
event.initTextEvent('textInput', true, true, window, 'a');
input.dispatchEvent(event);
input.value = text;
input.blur();
}
}
}
}
} else {
self.hideLogon();
}
再次抱歉,我希望将其作为评论。
如果您愿意,我可以在我使用它的网站上放置一个链接。
这对我有用(Chrome 76已测试)
input:-internal-autofill-selected {
background-color: transparent;
}
我尝试了几乎所有上述解决方案。什么都不适合我。最终使用此解决方案。希望有人帮忙。
/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: 1px solid green;
-webkit-text-fill-color: green;
-webkit-box-shadow: 0 0 0px 1000px #000 inset;
transition: background-color 5000s ease-in-out 0s;
}
谢谢本杰明!
Mootools解决方案有些棘手,因为我无法使用来获取字段 $('input:-webkit-autofill')
,因此我使用了以下内容:
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
window.addEvent('load', function() {
setTimeout(clearWebkitBg, 20);
var elems = getElems();
for (var i = 0; i < elems.length; i++) {
$(elems[i]).addEvent('blur', clearWebkitBg);
}
});
}
function clearWebkitBg () {
var elems = getElems();
for (var i = 0; i < elems.length; i++) {
var oldInput = $(elems[i]);
var newInput = new Element('input', {
'name': oldInput.get('name'),
'id': oldInput.get('id'),
'type': oldInput.get('type'),
'class': oldInput.get('class'),
'value': oldInput.get('value')
});
var container = oldInput.getParent();
oldInput.destroy();
container.adopt(newInput);
}
}
function getElems() {
return ['pass', 'login']; // ids
}
没有一种解决方案对我有用,插入阴影对我不起作用,因为输入具有覆盖页面背景的半透明背景。
所以我问自己:“ Chrome如何确定在给定页面上应自动填充的内容?”
“它会查找输入ID,输入名称吗?表单ID?表单动作?”
通过对用户名和密码输入的试验,只有两种方法导致Chrome无法找到应自动填充的字段:
1)将密码输入置于文本输入之前。2)给他们相同的名称和ID ...或根本不给名称和ID。
页面加载后,可以使用javascript动态更改页面上输入的顺序,也可以动态为其提供名称和ID。
而且Chrome不知道该怎么击...自动完成功能已损坏!
疯狂破解,我知道。但这对我有用。
Chrome 34.0.1847.116,OSX 10.7.5
不幸的是,上述解决方案在2016年(问题提出的第二年)对我没有任何作用
因此,这是我使用的主动解决方案:
function remake(e){
var val = e.value;
var id = e.id;
e.outerHTML = e.outerHTML;
document.getElementById(id).value = val;
return true;
}
<input id=MustHaveAnId type=text name=email autocomplete=on onblur="remake(this)">
基本上,它在保存值的同时删除标签,然后重新创建它,然后放回该值。
我用这个。为我工作。删除字段的黄色背景。
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:valid,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus
{
-webkit-transition-delay: 99999s;
-webkit-text-fill-color:#D7D8CE;
}
如前所述,对我来说,插入-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;
}