Question

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

我正在研究的设计是在深色背景上使用浅色文字，所以这真的会弄乱表格的外观 - 我有鲜明的黄色方块和几乎看不见的白色文字。一旦场被聚焦，场将恢复正常。

是否可以停止Chrome更改这些字段的颜色？

Answer 1

这很好用，您可以更改输入框样式以及输入框内的文本样式：

在这里你可以使用任何颜色，例如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'模糊半径'将完美覆盖它。

Answer 2

之前添加框阴影的解决方案适用于需要纯色背景的人。添加转换的另一种解决方案是有效的，但必须设置持续时间/延迟意味着在某些时候它可能会再次显示。

我的解决方案是使用关键帧，这样它将始终显示您选择的颜色。

$resultName = $con->query("SELECT * FROM ond");
$output="";
while($row = $resultName->fetch_assoc())
{
    $output .= '<option ';
    if($selectedValue == $row["ondID"])
    {
        $output .= "selected='selected'";
    }
    $output .= ' value="' . $row["ondID"] . '">' . $row['Name'] . '</option>';
}

示例代码：https://codepen.io/-Steve-/pen/dwgxPB

Answer 3

我有更好的解决方案。

将背景设置为下面的另一种颜色并没有解决我的问题，因为我需要一个透明的输入字段

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

Answer 4

这是设计的，因为这种着色行为来自WebKit。它允许用户了解已预先填充的数据。 Bug 1334

您可以通过执行（或在特定表单控件上

来关闭自动完成功能

<form autocomplete="off">
...
</form

或者您可以通过执行以下操作来更改自动填充的颜色：

input:-webkit-autofill {
    color: #2a2a2a !important;
}

注意，有一个错误被跟踪，以便再次使用：http://code.google.com/p/chromium/issues/detail?id=46543

这是一个WebKit行为。

Answer 5

要在不使用时间延迟的情况下拥有透明的背景（在现代Web应用程序中尤其需要，人们可以暂时停止使用它并希望界面的行为可预测），请使用以下方法：

input:-webkit-autofill { 
    -webkit-background-clip: text;
}

body {
  background: lightblue;
}

input {
  background: transparent;
}

input.no-autofill-bkg:-webkit-autofill {
  -webkit-background-clip: text;
}

<input type="text" name="email" />
<input type="text" name="email" class="no-autofill-bkg" />

正在使用：Chrome 83 / 84.0.4147.89，Edge 84.0.522.44

如果您决定重新发布我的解决方案，我只要求您输入我的名字或链接到此。

Answer 6

目前可能的解决方法是设置一个“强大的”内部阴影：

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

Answer 7

尝试隐藏自动填充样式

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

Answer 8

以上所有答案都有效，但确实存在缺陷。下面的代码是上述两个答案的合并，这些答案完美无缺，没有眨眼。

    public int BLLfunction(CompanyVMIndex CompanyVM)
    {

    }

Answer 9

SASS

input:-webkit-autofill

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

Answer 10

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

这将完全删除输入字段中的黄色

Answer 11

如果您想保持自动完成功能不变，可以使用一些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 12

我遇到了一个无法使用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;
}

Answer 13

除此之外：

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输入一样。

Answer 14

试试这个：与@ 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;
}

Answer 15

增加一小时的延迟将暂停输入元素上的所有CSS更改。
这比添加过渡动画或内部阴影更好。

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
  transition-delay: 3600s;
}

Answer 16

我使用没有JQuery的JavaScript开发了另一个解决方案。如果您发现这有用或决定重新发布我的解决方案，我只要求您提供我的姓名。请享用。 - Daniel Fairweather

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'），然后将文本值设置为它的先前状态（自动填充的文本）。请记住，此代码将在每个浏览器中运行，并会检查网页中的每个输入字段，并根据您的需要进行调整。

Answer 17

对于那些使用指南针的人：

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

Answer 18

我有一个使用CSS过滤器的纯CSS解决方案。

filter: grayscale(100%) brightness(110%);

灰度滤镜将黄色替换为灰色，然后亮度会消除灰色。

SEE CODEPEN

Answer 19

丹尼尔费尔韦瑟（Removing input background colour for Chrome autocomplete?）的解决方案（我希望提升他的解决方案，但仍然需要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();
    }

再次抱歉，我希望它能成为评论。

如果您愿意，我可以链接到我使用它的网站。

Answer 20

我放弃了！

由于无法使用自动完成功能更改输入的颜色，我决定使用jQuery for webkit浏览器禁用所有这些颜色。像这样：

if (/webkit/.test(navigator.userAgent.toLowerCase())) {
    $('[autocomplete="on"]').each(function() {
        $(this).attr('autocomplete', 'off');
    });
}

Answer 21

如果您想要阻止谷歌浏览器自动填充，我会得到一个解决方案，但它有点＆＃34;砍刀＆＃34; ，只需删除google chrome添加到这些输入字段的类，并将值设置为＆＃34;＆＃34;如果你不需要在加载后显示商店数据。

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

Answer 22

这适用于输入，textarea和正常，悬停，焦点和活动状态中的选择。

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

这是上述解决方案的SCSS版本，适用于使用SASS / SCSS的人员。

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill
{
    &, &:hover, &:focus, &:active
    {
        -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    }
}

Answer 23

不幸的是，严格来说，上述解决方案在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)">

基本上，它在保存值时删除标记，然后重新创建它，然后放回值。

Answer 24

谢谢本杰明！

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
}

Answer 25

没有一个解决方案适合我，插入阴影对我不起作用，因为输入的半透明背景覆盖在页面背景上。

所以我问自己，“Chrome如何确定在给定页面上自动填充的内容？”

“它是否查找输入ID，输入名称？表单ID？表单操作？”

通过我对用户名和密码输入的实验，我发现只有两种方法会导致Chrome无法找到应自动填充的字段：

1）将密码输入放在文本输入之前。 2）给他们相同的名字和身份......或根本没有名字和身份。

页面加载后，您可以使用javascript动态更改页面上输入的顺序，或动态地为其指定名称和ID ...

Chrome并不知道是什么打中了它...自动完成功能被破坏了！

疯狂的黑客，我知道。但它对我有用。

Chrome 34.0.1847.116，OSX 10.7.5

Answer 26

可以更改此框的颜色，例如已接受的答案。

但是如果你想让背景透明，这个方法是没有用的。但是，有一种方法（或者更确切地说是变通方法）可以使其透明，如下所示：

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
transition: background-color 5000s;
-webkit-text-fill-color: #fff !important;

}

这基本上相当于透明背景。

Answer 27

input:-webkit-autofill {
  border: none;
  border-radius: .3rem;
  caret-color: #fff; /* Pour le I quand on édite */
  color: #fff;
  background: #292a2d;
  /* webkit autofill */
  -webkit-text-fill-color: #fff; /* Surcharge la font color d'autofill */
  -webkit-background-clip: text; /* Supprime le background autofill, utile pour le border radius */
  box-shadow: 0 0 0 50px #292a2d inset; /* Ajoute un fake background à base d'ombrage aplatit */
}

Answer 28

这对我有用：

padding: 5px;
background-clip: content-box;

Answer 29

如前所述，inset -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;
}

Answer 30

我尝试了几乎所有上述解决方案。什么都不适合我。最终使用此解决方案。希望有人帮忙。

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

Answer 31

这对我有用（已测试Chrome 76）

input:-internal-autofill-selected {
    background-color: transparent;
}

Answer 32

简单，只需添加，

    autocomplete="new-password"

到密码字段。

Answer 33

试试这个

input:autofill{
    filter:none;
}

基本上，浏览器只是为“自动填充”输入添加自己的过滤器。您的风格在此之下。

Answer 34

尽管可以在许多答案中找到的解决方案都可以在 Chrome 中使用，但在 Safari for Mac和iOS 中却无法使用。

Safari 需要一条附加语句– background-clip。

这是可在不同平台上的所有主要浏览器上运行的解决方案的完整代码：

/* Disable autofill highlighting */
input:-webkit-autofill  {
  -webkit-text-fill-color: var(--text-input-color) !important;
  -webkit-box-shadow: 0 0 0 1rem var(--page-background-color) inset !important;
  background-clip: content-box !important;
}

（请使用您自己的值更改--text-input-color和--page-background-color。）

Answer 35

我们可以使用-webkit-autofill伪选择器来定位这些字段并根据需要设置样式。默认样式仅影响背景颜色，但是大多数其他属性（例如边框和字体大小）在此处适用。我们甚至可以使用下面的代码段中的-webkit-text-fill-color来更改文本的颜色。

/ *在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;
}

Answer 36

我用这个。为我工作。删除字段的黄色背景。

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

Answer 37

这适合我。

.input:-webkit-autofill {transition: background-color 5000s ease-in-out 0s;}

Answer 38

Google Chrome用户代理会阻止开发人员CSS，因此要更改autofill，用户界面必须使用以下其他属性：

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*/
}

Answer 39

这是完成此任务的复杂解决方案。

(function($){
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
       $('input, select').on('change focus', function (e) {
            setTimeout(function () {
                $.each(
                    document.querySelectorAll('*:-webkit-autofill'),
                    function () {
                        var clone = $(this).clone(true, true);
                        $(this).after(clone).remove();
                        updateActions();
                    })
            }, 300)
        }).change();
    }
    var updateActions = function(){};// method for update input actions
    updateActions(); // start on load and on rebuild
})(jQuery)

*:-webkit-autofill,
*:-webkit-autofill:hover,
*:-webkit-autofill:focus,
*:-webkit-autofill:active {
    /* use animation hack, if you have hard styled input */
    transition: all 5000s ease-in-out 0s;
    transition-property: background-color, color;
    /* if input has one color, and didn't have bg-image use shadow */
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    /* text color */
    -webkit-text-fill-color: #fff;
    /* font weigth */
    font-weight: 300!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name" autocomplete="name"/>
<input type="email" name="email" autocomplete="email"/>

Answer 40

使用此功能并检查问题是否已解决

<input type="email" id="email" name="email" class="form-control validate" onfocus="this.removeAttribute('readonly');" readonly>

Answer 41

可能有点晚了但是对于未来的参考，只有一个CSS解决方案，因为Olly Hodgons在这里显示 http://lostmonocle.com/post/1479126030/fixing-the-chrome-autocomplete-background-colour

您所要做的就是添加另一个选择器来覆盖默认输入字段设置所以使用而不是

input:-webkit-autofill {
    background-color: #FAFFBD !important;
}

像

这样的东西

#login input:-webkit-autofill {
    background-color: #ff00ff;
}

或

form input:-webkit-autofill {
    background-color: #f0f;
}

这似乎对我很好。

Answer 42

两年后线程的复活。我正在解决这个问题几天，并找到了一个简单的技巧来防止这个丑陋的自动完成功能：

只需添加一个随机字符串即可形成<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 ：仍然遇到问题，我决定完全删除<form>标记并通过jquery发布变量。它更容易。

删除Chrome自动填充的输入背景颜色？

42 个答案: