Question

我有2种基本形式 - 在同一页面上登录并注册。现在，我对登录表单自动填充没有问题，~~但是注册表单自动填充，我不喜欢它。~~

此外，表单样式获得黄色背景，我无法覆盖，我不想使用内联CSS这样做。我该怎么做才能让它们停止变黄~~和（可能）自动填充~~？提前谢谢！

Answer 1

用一个“强大的”内部阴影来欺骗它：

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 2

对于自动完成，您可以使用：

<form autocomplete="off">

关于着色问题：

从您的屏幕截图中我可以看到webkit生成以下样式：

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

1）因为#id-styles比.class样式更重要，所以可以工作：

#inputId:-webkit-autofill {
    background-color: white !important;
}

2）如果这不起作用，你可以尝试通过javascript编程设置样式

$("input[type='text']").bind('focus', function() {
   $(this).css('background-color', 'white');
});

3）如果这不起作用，~~你注定要失败： - ）~~考虑一下：这不会隐藏黄色，但会使文字再次可读。

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

4）css / javascript解决方案：

的CSS：

input:focus {
    background-position: 0 0;
}

以下javascript必须运行onload：

function loadPage()
{
    if (document.login)//if the form login exists, focus:
    {
        document.login.name.focus();//the username input
        document.login.pass.focus();//the password input
        document.login.login.focus();//the login button (submitbutton)
    }
}

例如：

<body onload="loadPage();">

祝你好运： - ）

5）如果上述工作都没有尝试删除输入元素，克隆它们，然后将克隆元素放回页面（适用于Safari 6.0.3）：

<script>
function loadPage(){

    var e = document.getElementById('id_email');
    var ep = e.parentNode;
    ep.removeChild(e);
    var e2 = e.cloneNode();
    ep.appendChild(e2);

    var p = document.getElementById('id_password');
    var pp = p.parentNode;
    pp.removeChild(p);
    var p2 = p.cloneNode();
    pp.appendChild(p2);
}

document.body.onload = loadPage;
</script>

6）来自here：

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 3

添加此CSS规则，黄色背景颜色将消失。：）

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

Answer 4

<form autocomplete="off">

几乎所有现代浏览器都会尊重这一点。

Answer 5

经过2个小时的搜索后，似乎Google Chrome仍以某种方式覆盖了黄色，但我找到了修复程序。它也适用于悬停，焦点等。您所要做的就是向其添加!important。

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 6

您还可以将表单元素的name属性更改为生成的内容，以便浏览器不会跟踪它。然而，如果请求网址相同，那么firefox 2.x +和谷歌浏览器似乎没有太多问题。尝试基本上为注册表单添加salt请求参数和salt字段名称。

但我认为autocomplete =“off”仍然是最佳解决方案：）

Answer 7

您可以从HTML5开始禁用自动完成功能（通过autocomplete="off"），但不能覆盖浏览器的突出显示。您可以尝试在CSS中弄乱::selection（大多数浏览器需要供应商前缀才能生效），但这可能也无济于事。

除非浏览器供应商专门实现了特定于供应商的覆盖方式，否则您无法对已经打算覆盖用户的网站样式表的此类样式执行任何操作。这些通常在应用样式表后应用，并忽略! important覆盖。

Answer 8

当您在<form>元素中使用代码时，浏览器上的自动完成功能仍会自动完成。

我也尝试将它放在<input>元素中，效果更好。

<form autocomplete="off">  AND  <input autocomplete="off">

然而，请停止支持此属性，请阅读 https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1

https://bugzilla.mozilla.org/show_bug.cgi?id=956906

我发现的另一项工作是在输入字段中取出占位符，表明它是电子邮件，用户名或电话字段（即“您的电子邮件”，“电子邮件”等）。“< / p>

enter image description here

这使浏览器不知道它是什么类型的字段，因此不会尝试自动填充它。

Answer 9

这解决了Safari和Chrome上的问题

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}

Answer 10

这似乎对我有用：

input {
  -webkit-background-clip: text !important;
}

Answer 11

如果它在输入字段中，你试图“取消黄色”......

用css设置背景颜色......让我们说#ccc（浅灰色）。
添加值=“sometext”，临时用“sometext”填充字段
（可选）添加一些小的javascript，以便在您输入真实文本时清除“sometext”。

所以，它可能看起来像这样：

<input id="login" style="background-color: #ccc;" value="username"
    onblur="if(this.value=='') this.value='username';" 
    onfocus="if(this.value=='username') this.value='';" />

Answer 12

在尝试了很多事情之后，我找到了工作解决方案，这些解决方案可以自动填充自动填充字段并将其替换为重复字段。不要放松附加事件，我想出了另一个（有点冗长）的解决方案。

在每个“输入”事件中，它会迅速将“更改”事件附加到所有相关输入。它会测试它们是否已经自动填充。如果是，则发送一个新的文本事件，该事件将欺骗浏览器认为该值已被用户更改，从而允许删除黄色背景。

var initialFocusedElement = null
  , $inputs = $('input[type="text"]');

var removeAutofillStyle = function() {
  if($(this).is(':-webkit-autofill')) {
    var val = this.value;

    // Remove change event, we won't need it until next "input" event.
    $(this).off('change');

    // Dispatch a text event on the input field to trick the browser
    this.focus();
    event = document.createEvent('TextEvent');
    event.initTextEvent('textInput', true, true, window, '*');
    this.dispatchEvent(event);

    // Now the value has an asterisk appended, so restore it to the original
    this.value = val;

    // Always turn focus back to the element that received 
    // input that caused autofill
    initialFocusedElement.focus();
  }
};

var onChange = function() {
  // Testing if element has been autofilled doesn't 
  // work directly on change event.
  var self = this;
  setTimeout(function() {
    removeAutofillStyle.call(self);
  }, 1);
};

$inputs.on('input', function() {
  if(this === document.activeElement) {
    initialFocusedElement = this;

    // Autofilling will cause "change" event to be 
    // fired, so look for it
    $inputs.on('change', onChange);
  }
});

Answer 13

适用于所有浏览器的简单javascript解决方案：

setTimeout(function() {
    $(".parent input").each(function(){
        parent = $(this).parents(".parent");
        $(this).clone().appendTo(parent);   
        $(this).attr("id","").attr("name","").hide();
    }); 
}, 300 );

克隆输入，重置属性并隐藏原始输入。 iPad需要超时

Answer 14

我已经看到Google工具栏的自动完成功能已被javascript禁用。它可能适用于其他一些自动填充工具;我不知道它是否会对内置自动完成功能的浏览器有所帮助。

<script type="text/javascript"><!--
  if(window.attachEvent)
    window.attachEvent("onload",setListeners);

  function setListeners(){
    inputList = document.getElementsByTagName("INPUT");
    for(i=0;i<inputList.length;i++){
      inputList[i].attachEvent("onpropertychange",restoreStyles);
      inputList[i].style.backgroundColor = "";
    }
    selectList = document.getElementsByTagName("SELECT");
    for(i=0;i<selectList.length;i++){
      selectList[i].attachEvent("onpropertychange",restoreStyles);
      selectList[i].style.backgroundColor = "";
    }
  }

  function restoreStyles(){
    if(event.srcElement.style.backgroundColor != "")
      event.srcElement.style.backgroundColor = "";
  }//-->
</script>

Answer 15

由于浏览器搜索密码类型字段，另一种解决方法是在表单的开头包含隐藏字段：

<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />

Answer 16

我读了这么多线程并尝试了很多代码。收集完所有内容后，我发现干净地清空登录名和密码字段并将其背景重置为白色的唯一方法如下：

$(window).load(function() {
    setTimeout(function() {
        $('input:-webkit-autofill')
            .val('')
            .css('-webkit-box-shadow', '0 0 0px 1000px white inset')
            .attr('readonly', true)
            .removeAttr('readonly')
        ;
    }, 50);
});

随意发表评论，如果您找到一些，我会对所有增强功能开放。

Answer 17

form元素具有autocomplete属性，您可以将其设置为off。从CSS开始，属性后的!important指令不会被覆盖：

background-color: white !important;

只有IE6不理解它。

如果我误解了你，那么你可以找到有用的outline属性。

Answer 18

现代浏览器不支持自动完成关闭。我发现解决自动完成的最简单方法是使用HTML和JS。首先要做的是将HTML中的输入类型从“密码”更改为“文本”。

<input class="input input-xxl input-watery" type="text" name="password"/>

加载窗口后自动完成开始。没关系。但是，当您的字段类型不是“密码”时，浏览器不知道它必须填写哪些字段。因此，表单字段上不会有自动填充。

之后，将事件焦点绑定到密码字段，例如。在Backbone中：

'focusin input[name=password]': 'onInputPasswordFocusIn',

在onInputPasswordFocusIn中，只需将字段类型更改为密码，只需检查：

if (e.currentTarget.value === '') {
    $(e.currentTarget).attr('type', 'password');
}

就是这样！

UPD：此功能不适用于已禁用的JavaSciprt

2018年UPD。还发现了一些有趣的伎俩。将readonly属性设置为输入字段，并在焦点事件上将其删除。首先阻止浏览器自动填充字段，其次是允许输入数据。

Answer 19

请尝试在输入标签中使用autocomplete =“ none”

这对我有用

Answer 20

我还必须将文本颜色更改为较暗的颜色（请参阅StackOverflow深色主题颜色）。

因此最终得到了@TamásPap，@ MCBL和@don的解决方案的混合体：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #2d2d2d inset !important;
    -webkit-text-stroke-color: #e7e8eb !important;
    -webkit-text-fill-color: #e7e8eb !important;
}

Answer 21

您链接到的屏幕截图显示WebKit正在使用选择器input:-webkit-autofill来表示这些元素。你试过把它放在你的CSS中吗？

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

如果这不起作用，那么可能没有。这些字段会突出显示，提醒用户他们已使用私人信息（例如用户的家庭地址）进行了自动填充，并且可能会认为允许隐藏页面会导致安全风险。

Answer 22

您可以使用 :-webkit-autofill

设置自动填充输入的样式

即使在带有 webkit-prefix 的 firefox 中！

要改变背景颜色，有 box-shadow 技巧。
对于 Firefox，您还需要额外的 filter:none。

:-webkit-autofill { 
    filter:none; /* needed for firefox! */
    box-shadow: 0 0 0 100px rgba(38, 163, 48, 0.212) inset;
}

Answer 23

让我们使用一点 css hack：

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, 
input:-internal-autofill-selected {
    -webkit-text-fill-color: #000;
    background: #fff !important;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0%), inset 0 0 0 100px #fff;
}

Answer 24

这里的真正问题是Webkit（Safari，Chrome，...）有一个bug。当页面上有多个[表单]时，每个表单都有一个[input type =“text”name =“foo”...]（即属性'name'的值相同），那么当用户返回时在页面上，自动填充将在页面上FIRST [表单]的输入字段中完成，而不是在已发送的[表单]中完成。第二次，NEXT [表单]将自动填充，依此类推。只有具有相同名称的输入文本字段的[form]才会受到影响。

这应该向Webkit开发人员报告。

Opera自动填充右侧[表单]。

Firefox和IE不会自动填充。

所以，我再说一遍：这是Webkit中的一个错误。

Answer 25

为什么不把它放在你的css中：

input --webkit-autocomplete {
  color: inherit;
  background: inherit;
  border: inherit;
}

这应该照顾你的问题。虽然它确实引起了可用性问题，因为现在用户无法看到表单是否以他/她习惯的方式自动填充。

[edit]发布后我看到一个类似的答案已经给出和，你评论它不起作用。我不太明白为什么，因为它在测试时确实有效。

使用HTML / CSS覆盖浏览器表单填充和输入突出显示

25 个答案: