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

139

我有2种基本形式-登录和注册，都在同一页面上。现在，我可以自动填写表单登录了，但是注册表单也会自动填写，我不喜欢它。

另外，表单样式的背景为黄色，我无法覆盖它，也不想使用内联CSS来实现。我该怎么办才能使它们停止变为黄色和（可能）自动填充？提前致谢！

html  css  input  autofill 
— 卡斯拉夫
source
4
您实际上是在问两个问题：如何禁用表单自动填充？-并且-启用表单自动填充时如何覆盖黄色背景？直到我阅读了以下答案中的所有评论之后，这才变得不清楚。您可能要考虑编辑您的问题（特别是因为您已经尽力提供赏金）。
— benzado 2010年
您说得对，已编辑。还是它的一个懒惰版本。
— 卡斯拉夫
1
作为表单的用户，由于您的视觉偏好，我不希望通过强制自动完成并突出显示来降低可用性。让用户关闭此功能，而不是您。放开我的浏览体验。
— Byran Zaugg 2010年
就是这样，我只在REGISTRATION表单中禁用了自动完成功能，基本上，它不应该进行常规的自动完成功能，完成信息仅在注册后创建。至于登录表单，我想保持自动完成功能，但是只禁用它在输入字段上使用的哑色，因为里面的文本变得不可读-背景为黄色，文本颜色为白色（原始背景为深灰色） 。
— 卡斯拉夫
1
— zzzzBov 2013年

Answers:

163

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

<form autocomplete="off">

关于着色问题：

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

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

1）由于#id样式比.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必须在加载时运行：

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）从这里：

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);
        });
    });
}
— 菲尔·里科夫
source
（1）不起作用。回到家后，我会尝试（2）；希望JS可以覆盖它；谢谢:)
— 卡斯拉夫
1
（4）绝对删除黄色：focus边框。
— ruruskyi 2012年
如果最后一点对您不起作用，并且您确实知道javascript的工作方式（获得ID的权利等），则可能会遇到我遇到的问题，出于某种原因，我正在使用jquery mobile，稍后将其替换并替换输入它似乎。因此，我要做的是设置一个间隔，该间隔每50毫秒克隆一次（使用setTimeout在400毫秒后起作用，但我不想冒险使用慢速连接）。一秒钟后，该间隔被删除：code
— Mathijs Segers 2013年
var keepTheInputCloned = setInterval(function(){ 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); },50); setTimeout(function(){clearInterval(keepTheInputCloned)},1000);
— Mathijs Segers
我在Mavericks上的Safari遇到类似的问题。但是，当我采用方法5时，他们将其延迟一秒钟（或将超时设置为3000时为三秒钟），然后浏览器成功，并且自动完成功能打开。在我的使用案例中，我要向用户询问另一个站点的用户名/密码，以便我可以从另一个站点提取信息，所以我绝对不希望它自动填充他们用于我的站点的用户名和密码。有什么想法（除了原始＃3的厄运）？
— 杰克RG 2014年
218

使用“强烈”的内部阴影来欺骗它：

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: 0 0 0 50px white inset;/*your box-shadow*/
    -webkit-text-fill-color: #333;
}
— 塔玛斯帕普
source
10
这真的很聪明。:)
— Jordan Gray
3
+1000（如果可以的话）是的，我找不到其他方法可以做到这一点。这确实是对webkit的干扰……
— o_O
1
很棒，这应该是简单有效的第一答案
— Pixelomo 2015年
3
这很棒，因为它可以正常工作并且非常有创意。但这使我想起了旧的IE6黑客之类的东西。Google有点讨厌为我们提供：-webkit-autofill参数，而不是让设计人员覆盖默认值，对吧？
— squarecandy
1
提供无法自定义的颜色选择对可用性和可访问性都没有帮助。这些问题仍然完全由开发人员掌握，除了Chrome中令人沮丧的黑客攻击。没有人可以责怪Chrome开发人员的意图，只是结果。
— 伦斯特（Lunster）
25

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

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
— 麦克林
source
1
这对我有用-谢谢！（尽管我需要将白色更改为我想要的颜色）
— jennEDVT '16
2
显然，最佳答案。
— 布兰登·哈里斯
16 
<form autocomplete="off">

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

— 杰森·凯斯特（Jason Kester）
source
7
太棒了，但这只能解决不那么重要的问题；如何保持自动完成但丢失样式（prntscr.com/4hkh）Webkit将其推倒了？o：不过
— casraf
1
实际上，它应该两者兼而有之。该框只会变成黄色，以告知您chrome / safari / ff已使用您的密码自动填充了该框。如果你告诉它不要填，也不会得到一个机会，颜色进去。
— 杰森-凯斯特
11
是的，但是看看我说的是：“如何保持自动完成，却失去样式的 Webkit
— 推子
只有问题autocomplete是，它5版之前是无效的HTML
— 保罗·韦特
15

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

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

— 不要
source
它对我有用，没有1000px，到处都是0，-webkit-box-shadow：0 0 0 0 white inset！important;
— Luis Lopez
3

您还可以将表单元素的name属性更改为生成的内容，以使浏览器无法跟踪它。但是，如果请求网址相同，则firefox 2.x +和google chrome似乎并没有太大问题。尝试基本上为注册表单添加一个盐请求参数和一个盐字段名称。

但是我认为autocomplete =“ off”仍然是顶级解决方案:)

— 德米特里·里赫滕
source
3

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

除非浏览器供应商专门实现了一种特定于供应商的覆盖方式，否则您无法对已经打算覆盖用户网站样式表的样式进行任何处理。这些通常在应用样式表后应用，并且! important也会忽略替代。

— 艾伦·梅
source
3

有时，仅在<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

我发现的另一种解决方法是在输入字段中删除占位符，以表明该字段是电子邮件，用户名或电话字段（即“您的电子邮件”，“电子邮件”等）。）

在此处输入图片说明

这样一来，浏览器就不会知道它是哪种字段，因此不会尝试自动完成该字段。

— andstud.io
source
我喜欢的是，大多数人不会欣赏页面重新加载时未填写的整个表单（例如，长文本区域），但是允许开发人员阻止某些元素（例如，银行卡号）的填写。不过令人讨厌的是，对该属性的支持正在停止
— Luke Madhanga 2014年
1

如果它在输入字段中，您正在尝试“取消黄色” ...

  1. 使用CSS设置背景色...假设#ccc（浅灰色）。
  2. 添加value =“ sometext”，该字段临时用“ sometext”填充
  3. （可选）添加一些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='';" />
— 白马
source
1

这可以解决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);
}
— Arjan
source
1
我相信这样做，但是每秒做50次会不会有点苛刻？我知道它会工作，并且不会太慢。但是似乎有点太多。
— Mathijs Segers
0

您链接到的屏幕截图显示，WebKit正在使用input:-webkit-autofill这些元素的选择器。您是否尝试过将其放入CSS？

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

如果那不起作用，那么可能什么也不会。这些字段将突出显示，以警告用户其已被私人信息（例如用户的家庭住址）自动填充，并且可能会争辩说允许页面隐藏会带来安全风险。

— 本萨多
source
0

该form元素有一个autocomplete可以设置为属性off。从CSS开始，!important属性后的指令可防止其被覆盖：

background-color: white !important;

只有IE6无法理解。

如果我误解了您，那么您还会outline发现有用的财产。

— ne
source
2
Chrome似乎会自动填充输入字段时忽略！important
— Torandi 2011年
@Torandi可能是由于用户代理样式表。用户代理样式表中的设置应最后应用，除非它具有!important指令，在这种情况下，它优先于其他所有指令。您应该查看用户代理样式表（尽管我不知道在哪里找到它）。
— zneak 2011年
0

我已经看到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>
— 亚当
source
0

在尝试了很多事情之后，我发现了可以解决自动填充字段并替换为重复字段的有效解决方案。为了避免发生附带的事件，我想出了另一个（有点冗长）的解决方案。

在每个“输入”事件处，它将“更改”事件迅速附加到所有涉及的输入上。它会测试它们是否已自动填充。如果是，则调度一个新的文本事件，该事件将诱使浏览器认为该值已由用户更改，从而允许删除黄色背景。

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);
  }
});
— 恩尼斯·卡尔森斯
source
0

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

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

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

— 螨虫
source
0

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

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

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

$(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);
});

随时发表评论，如果您发现了一些增强功能，我将对其开放。

— 特威斯托
source
0

现代浏览器不支持自动完成关闭功能。我发现解决自动完成问题的最简单方法是使用HTML和JS进行一些学习。要做的第一件事是将HTML中的输入类型从“密码”更改为“文本”。

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

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

之后，将事件focusin绑定到密码字段，例如。在骨干网中：

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

在中onInputPasswordFocusIn，只需通过简单的检查将字段的类型更改为密码即可：

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

就是这样！

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

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

— volodymyr3131
source
自动填充功能是该标准的一部分，尽管其用法和实现方式可能有所不同。另外，在IE中输入的改变类型失败壮观，这就是为什么jQuery的块，但通常，如果你打算支持IE不是一个好主意developer.mozilla.org/en-US/docs/Web/Security/...
— casraf
@casraf对不起，它是标准技术的一部分，但并非必须在所有现代浏览器中都能正常工作，因此它不会完成其发明的目的。在EDGE中工作正常，关于以前的版本什么也听
— 不见
没错，它并没有在所有地方实现。在v 11之前，问题仍然存在-取决于您要支持IE的时间，我认为您不能更改输入类型。如果您不担心旧版本，则不妨使用autocomplete=off，因为它可以在FF，Chrome浏览器中使用一段时间，以及从IE以前版本开始的版本
— casraf
我尝试将autocomplete = off用于输入和表单，Chrome仍然填写注册和登录表单数据（。这只是一种奇怪的魔术，因为基于注释，在某些情况下它可以工作，并且在一些它不=）
— volodymyr3131'1
我知道，并没有真正始终遵循这些标准。真可惜，使我们的生活更加艰难:(
— casraf
0

我还必须将文本颜色更改为较暗的颜色（请参见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;
}
— 安德烈
source
-3

为什么不将其放在您的CSS中：

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

那应该解决您的问题。尽管它确实引起了可用性问题，因为现在用户无法看到表单是按照他/她惯用的方式自动填充的。

[edit]发布此内容后，我看到已经给出了类似的答案，并且您对此发表了评论，认为它不起作用。我不太清楚为什么，因为当我测试它时它确实起作用了。

— 克里斯
source
在Chrome和Safari浏览器中均不起作用。风格是input:-webkit-autofill而且input --webkit-autocomplete根本就不存在
— ruruskyi 2012年
@EliseuMonar：我很确定自己没有撒谎，但是不记得如何或在哪里测试的细节。代码本身可能是从内存中键入的，而不是复制/粘贴的，所以自动完成与自动填充？我不知道。
— 克里斯（Kris）
-3

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

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

Opera自动填充正确的[form]。

Firefox和IE不会自动填充。

因此，我再说一遍：这是Webkit中的错误。

— 佩林德伯格
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.