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

Posted

技术标签:

【中文标题】使用 HTML/CSS 覆盖浏览器表单填充和输入突出显示【英文标题】：Override browser form-filling and input highlighting with HTML/CSS 【发布时间】：2010-02-25 22:19:00 【问题描述】：

我有两种基本形式：登录和注册，都在同一个页面上。现在，我对自动填写登录表单没有任何问题，但注册表也会自动填写，我不喜欢它。

此外，表单样式有一个黄色背景，我无法覆盖它，我不想使用内联 CSS 来覆盖它。我该怎么做才能使它们不再被染成黄色和（可能）自动填充？

【问题讨论】：

你真的在这里问两个问题：如何禁用表单自动填充？ -AND- 启用表单自动填充时如何覆盖黄色背景？在我阅读了下面答案中的所有 cmets 之前，这还不清楚。您可能需要考虑编辑您的问题（特别是因为您已经提供了赏金）。 你说得对，已编辑。或者它的懒惰版本。 作为表单的用户，我不想因为您的视觉偏好而通过强制自动完成和突出显示而削弱我的可用性。让用户关闭此功能，而不是您。别管我的浏览体验。 就是这样，我只是在 REGISTRATION 表单中禁用了自动完成功能，基本上，它不应该有常规的自动完成功能，只有在您注册后才会创建完成信息。至于登录表单，我想保持自动完成，但只是禁用它放在输入字段上的哑色，因为里面的文本变得不可读——背景是黄色，文本颜色是白色（原始背景是深灰色） . Google Chrome form autofill and its yellow background 的可能重复项 【参考方案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: 0 0 0 50px white inset;/*your box-shadow*/
    -webkit-text-fill-color: #333;

【讨论】：

+1000（如果可以的话）是的，我想不出任何其他方法来做到这一点。这对webkit来说实在是太侵入了…… 这绝对是惊人的，非常有创意的解决方案，+allthepoints 太棒了，这应该是第一答案，简单有效 这很棒，因为它很有效，而且很有创意。但它让我想起了旧的 IE6 hack 之类的东西。谷歌有点蹩脚的给我们一个 :-webkit-autofill 参数，而不是让设计师覆盖默认值，对吧？ 提供无法自定义的颜色选择无助于可用性和可访问性。除了 Chrome 中令人沮丧的黑客攻击之外，这些问题仍然完全掌握在开发人员手中。没有人能指责 Chrome 开发者的意图，只有结果。【参考方案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：

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

【讨论】：

(1) 不起作用。我回家后会尝试（2）；希望 JS 可以覆盖它；谢谢:) (4) 肯定会移除黄色 :focus 边框。 如果最后一点对您不起作用，并且您确实知道 javascript 是如何工作的（得到正确的 ID 等）您可能遇到了我遇到的问题，我使用 jquery mobile 出于某些原因这稍后会初始化并替换它看起来的输入。所以我所做的是设置一个间隔，每 50 毫秒克隆一次（它使用 setTimeout 在 400 毫秒后工作，但我不想冒险连接缓慢）。一秒钟后，间隔被删除：code 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); 我在 Mavericks 上的 Safari 也有类似的问题。但是当我使用方法 5 时，他们将其一秒（或者当我将超时设置为 3000 时为三秒）然后浏览器获胜并且我已经打开了自动完成功能。在我的用例中，我要求用户提供另一个站点的用户名/密码，以便我可以从另一个站点提取信息，所以我绝对不希望它自动填充他们用于我的站点的用户名和密码。对此有什么想法（除了原版#3的厄运）？【参考方案3】：

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

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

【讨论】：

这对我有用 - 谢谢！ （虽然我需要将白色更改为我真正想要的颜色） 显然是最佳答案。【参考方案4】：

经过 2 小时的搜索，谷歌浏览器似乎仍然以某种方式覆盖了黄色，但我找到了解决方法。它也适用于悬停、聚焦等。您只需添加!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;

这将从输入字段中完全去除黄色

【讨论】：

它对我有用，没有 1000px，到处都是 0，-webkit-box-shadow: 0 0 0 0 white inset !important;【参考方案5】： 
<form autocomplete="off">

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

【讨论】：

很棒，但它只解决了不太重要的问题；我怎样才能保持自动完成但失去风格（prntscr.com/4hkh）webkit 挤到它的喉咙里？ o：谢谢 其实应该两者都做。该框只会变成黄色，让您知道 chrome/safari/ff 已使用您的密码自动填充它。如果你告诉它不要填充，它就没有机会给它上色。 是的，但看看我说的：“我怎样才能保持自动完成但失去风格 webkit shoves” autocomplete 唯一的问题是它在版本 5 之前的 HTML 中无效。【参考方案6】：

这似乎对我有用：

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

【讨论】：

如果您想要透明背景，这是唯一的解决方案 @Kerry7777 这是唯一对我有用的解决方案。这是最简单的。你成就了我的一天【参考方案7】：

当您在 &lt;form&gt; 元素中添加代码时，有时浏览器上的自动完成功能仍会自动完成。

我也尝试将它放在&lt;input&gt; 元素中，效果更好。

<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

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

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

【讨论】：

我喜欢的是大多数人不会喜欢在页面重新加载时不填写整个表单（例如长文本区域），但允许开发人员防止某些元素被填写in（例如银行卡号）。但令人烦恼的是，对这个属性的支持正在停止【参考方案8】：

您还可以将表单元素的 name 属性更改为生成的内容，这样浏览器就不会跟踪它。但是，如果请求 url 相同，firefox 2.x+ 和 google chrome 似乎没有太多问题。尝试为注册表单添加一个盐请求参数和一个盐字段名称。

但我认为 autocomplete="off" 仍然是最佳解决方案 :)

【讨论】：

【参考方案9】：

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

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

【讨论】：

【参考方案10】：

form 元素有一个autocomplete 属性，您可以将其设置为off。在 CSS 中，属性后的 !important 指令可防止其被覆盖：

background-color: white !important;

只有IE6看不懂。

如果我误解了你，还有 outline 属性对你很有用。

【讨论】：

Chrome 在自动填充输入字段时似乎忽略了 !important @Torandi 这可能是因为用户代理样式表。用户代理样式表中的设置应该最后应用，除非它有 !important 指令，在这种情况下它优先于其他所有内容。您应该查看您的用户代理样式表（虽然我不知道在哪里可以找到它）。【参考方案11】：

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

    使用 css 设置背景颜色...比如说 #ccc（浅灰色）。 添加 value="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='';" />

【讨论】：

【参考方案12】：

这解决了 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);

【讨论】：

我相信它会，但每秒执行 50 次会不会有点苛刻？我知道它会起作用并且不会太慢。不过好像有点过分了。【参考方案13】：

让我们使用一点 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;

【讨论】：

【参考方案14】：

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

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

如果这不起作用，那么可能什么都不会。突出显示这些字段以提醒用户他们已自动填充私人信息（例如用户的家庭住址），并且可以认为允许隐藏页面存在安全风险。

【讨论】：

【参考方案15】：

我看到 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>

【讨论】：

【参考方案16】：

在尝试了很多事情之后，我找到了有效的解决方案，可以消除自动填充的字段并将它们替换为重复的字段。为了不丢失附加事件，我想出了另一个（有点冗长）解决方案。

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

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

【讨论】：

【参考方案17】：

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

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

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

【讨论】：

【参考方案18】：

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

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

【讨论】：

【参考方案19】：

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

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

请随时发表评论，如果您发现一些改进，我愿意接受所有改进。

【讨论】：

【参考方案20】：

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

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

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

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

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

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

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

就是这样！

UPD：这个东西不适用于禁用的 JavaSciprt

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

【讨论】：

好吧，自动完成是标准的一部分，尽管它的使用和实现可能会有所不同。此外，在 IE 中更改输入类型非常失败，这就是 jQuery 阻止它的原因，但通常如果您打算支持 IE developer.mozilla.org/en-US/docs/Web/Security/… 这不是一个好主意 @casraf 对不起，它是标准的一部分，但它不能在所有现代浏览器中正常工作，所以它不会做它被发明的东西。在 EDGE 中它工作得很好，关于以前的版本什么都说不出来（ 没错，它并没有在所有地方实现。问题仍然存在 - 取决于您想要支持 IE 多远 - 在 v 11 之前，我不相信您可以更改输入类型。如果你不担心旧版本，那么你不妨使用autocomplete=off，因为它在FF、Chrome 中工作了一段时间，IE 和之前的版本一样左右 我尝试对输入和表单使用 autocomplete=off，Chrome 仍然会填写注册和登录表单数据（。这只是某种奇怪的魔法，因为基于 cmets，在某些情况下它可以工作，而在某些情况下则不行 =) 我知道，这些标准并没有真正得到一致的遵守。太可惜了，让我们的生活更艰难:(【参考方案21】：

请尝试在您的输入标签中使用 autocomplete="none"

这对我有用

【讨论】：

禁用“自动完成”不是一个好的用户体验解决方案。【参考方案22】：

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

所以最终得到了@Tamás Pap、@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;

【讨论】：

【参考方案23】：

您可以使用 :-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;

【讨论】：

【参考方案24】：

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

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

这应该可以解决您的问题。虽然它确实引发了可用性问题，因为现在用户无法看到表单是按照他/她习惯的方式自动填写的。

[编辑] 发布此内容后，我看到已经给出了类似的答案并且您对此发表评论说它不起作用。我不太明白为什么，因为它在我测试时确实有效。

【讨论】：

在 chrome 和 safari 中都不起作用。样式是 input:-webkit-autofill 和 input --webkit-autocomplete 根本不存在 @EliseuMonar：我很确定我没有撒谎，但我不记得我如何或在哪里测试它的细节。代码本身可能是从内存中输入的，而不是复制/粘贴的，所以自动完成与自动填充？我不知道。【参考方案25】：

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

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

Opera 自动填充右侧 [form]。

Firefox 和 IE 不会自动填充。

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

【讨论】：

以上是关于使用 HTML/CSS 覆盖浏览器表单填充和输入突出显示的主要内容，如果未能解决你的问题，请参考以下文章

#-webkit-autofill##google#启用表单自动填充时，如何覆盖黄色背景

css 表单 - 边距/填充问题 - 包括代码和图像

解决浏览器自动填充form表单账号和密码输入框的问题

点击“返回”按钮时禁用浏览器表单输入预填充/自动填充功能

jquery 防止自动填充表单

使用 html 和 css 将术语输入隐藏表单字段？