Dis*_*oat 595 google-chrome autocomplete input
在我正在处理的表单上,Chrome会自动填写电子邮件和密码字段.这很好,但Chrome会将背景颜色更改为淡黄色.
我正在研究的设计是在深色背景上使用浅色文字,所以这真的弄乱了表格的外观 - 我有鲜明的黄色方块和几乎看不见的白色文字.场聚焦后,场恢复正常.
是否可以阻止Chrome更改这些字段的颜色？
Far*_*uti 1102
这很好用,您可以更改输入框样式以及输入框内的文本样式:
在这里,你可以使用任何颜色例如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'模糊半径'将完美覆盖它.
Ste*_*eve 283
之前添加框阴影的解决方案适用于需要纯色背景的人.添加转换的另一种解决方案是有效的,但必须设置持续时间/延迟将意味着在某些时候它可能再次显示.
我的解决方案是使用关键帧,这样它将始终显示您选择的颜色.
@-webkit-keyframes autofill {
to {
color: #666;
background: transparent;
}
}
input:-webkit-autofill {
-webkit-animation-name: autofill;
-webkit-animation-fill-mode: both;
}
Codepen示例:https://codepen.io/-Steve-/pen/dwgxPB
小智 259
我有一个更好的解决方案.
将背景设置为下面的另一种颜色并没有解决我的问题,因为我需要一个透明的输入字段
-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;
}
Han*_*yer 99
最新更新后工作：
input:-webkit-autofill,
input:-webkit-autofill:focus {
transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted] {
background-color: transparent !important;
}
man*_*-84 77
要在不使用时间延迟的情况下拥有透明背景（尤其是在现代 Web 应用程序中，人们可以暂时停止使用它并希望界面具有可预测的行为），请使用以下命令：
input:-webkit-autofill {
-webkit-background-clip: text;
}
input:-webkit-autofill {
-webkit-background-clip: text;
}
body {
background: lightblue;
}
input {
background: transparent;
}
input.no-autofill-bkg:-webkit-autofill {
-webkit-background-clip: text;
}正在处理：Chrome 83 / 84.0.4147.89、Edge 84.0.522.44
如果您决定重新发布我的解决方案，我只要求您提供我的姓名或指向此的链接。
Gís*_*son 57
这是我的解决方案,我使用了转换和转换延迟,因此我可以在输入字段上具有透明背景.
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;
}
Moh*_*our 47
这是设计的,因为这种着色行为来自WebKit.它允许用户了解已预先填充的数据.错误1334
您可以通过执行(或在特定的表单控件上)关闭自动完成功能:
<form autocomplete="off">
...
</form
或者您可以通过执行以下操作来更改自动填充的颜色:
input:-webkit-autofill {
color: #2a2a2a !important;
}
请注意,有一个错误被跟踪,以便再次使用:http://code.google.com/p/chromium/issues/detail？id = 4653
这是一个WebKit行为.
Tam*_*Pap 29
目前可能的解决方法是设置一个"强大"的内部阴影:
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;
}
Fra*_*sta 22
试试隐藏自动填充样式
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;
}
小智 18
所有上述答案都有效,但确实存在缺陷.下面的代码是上述两个答案的合并,完美无缺,没有眨眼.
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;
}
Pat*_*her 18
上海社会科学院
input:-webkit-autofill
&,
&:hover,
&:focus,
&:active
transition-delay: 9999s
transition-property: background-color, color
don*_*don 15
经过2个小时的搜索,似乎谷歌仍然以某种方式覆盖黄色,但我为它修复它.那就对了.它也适用于悬停,焦点等.你所要做的就是添加!重要的是它.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
这将完全删除输入字段中的黄色
除此之外:
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);
}
另外,当你点击输入时,黄色会回来.对于焦点,如果你使用bootstrap,第二部分用于边框高亮0 0 8px rgba(82,168,236,0.6);
这样看起来就像任何bootstrap输入.
如果您想保持自动完成功能不变,可以使用一些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);
});
});}
小智 8
我遇到了一个无法使用box-shadow的问题,因为我需要输入字段是透明的.它有点像黑客但纯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;
}
对于深色背景上的透明输入背景（浅色文本）：
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-background-clip: text;
-webkit-text-fill-color: #ffffff;
transition: background-color 5000s ease-in-out 0s;
}
小智 7
试试这个:与@ 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;
}
Google Chrome 用户代理会阻止开发人员CSS，因此要更改autofillUI 必须使用另一个属性，如下所示：
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #d500ff inset !important;
/*use inset box-shadow to cover background-color*/
-webkit-text-fill-color: #ffa400 !important;
/*use text fill color to cover font color*/
}
这将适用于正常、悬停、焦点和活动状态下的输入、文本区域和选择。
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;
}
}
添加一个小时的延迟会暂停输入元素上的任何css更改.
这比使用过渡动画或内部阴影更好.
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
transition-delay: 3600s;
}
小智 6
我使用没有JQuery的JavaScript开发了另一个解决方案.如果您发现这有用或决定重新发布我的解决方案,我只要求您提供我的姓名.请享用. - 丹尼尔费尔韦瑟
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'),然后将文本值设置为它的先前状态(自动填充的文本).请记住,此代码将在每个浏览器中运行,并将检查网页中的每个输入字段,根据您的需要进行调整.
对于那些使用指南针的人：
@each $prefix in -webkit, -moz {
@include with-prefix($prefix) {
@each $element in input, textarea, select {
#{$element}:#{$prefix}-autofill {
@include single-box-shadow(0, 0, 0, 1000px, $white, inset);
}
}
}
}
小智 5
如果你想阻止谷歌浏览器自动填充，但它有点“砍刀”，我有一个解决方案，只需删除谷歌浏览器添加到这些输入字段的类，并将值设置为“”（如果不需要显示）加载后存储数据。
$(document).ready(function () {
setTimeout(function () {
var data = $("input:-webkit-autofill");
data.each(function (i, obj) {
$(obj).removeClass("input:-webkit-autofill");
obj.value = "";
});
}, 1);
});
我有一个使用CSS过滤器的纯CSS解决方案。
filter: grayscale(100%) brightness(110%);
灰度滤镜将黄色替换为灰色，然后亮度消除了灰色。
我用这个。为我工作。删除字段的黄色背景。
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;
}
它\xe2\x80\x99s 可以改变这个框的颜色，就像接受的答案一样。
\n但如果你想让背景透明的话这个方法就没用了。然而，有\xe2\x80\x99s一种方法（或者更确切地说是解决方法）使其透明，如下所示：
\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover, \ninput:-webkit-autofill:focus, \ninput:-webkit-autofill:active {\n transition: background-color 5000s;\n -webkit-text-fill-color: #fff !important;\n}\n这基本上相当于透明背景。
\n