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

html css input autofill

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

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

你真的在这里问两个问题：如何禁用表单自动填充？ -AND- 启用表单自动填充时如何覆盖黄色背景？在我阅读下面答案中的所有评论之前，这一点还不清楚。您可能需要考虑编辑您的问题（特别是因为您已经提供了赏金）。

你是对的，编辑。或者它的懒惰版本。

作为表单的用户，我不希望通过强制自动完成和突出显示来削弱我的可用性，因为您的视觉偏好。让用户关闭此功能，而不是您。别管我的浏览体验。

就是这样，我只在注册表格中禁用了自动完成功能，基本上，它不应该有常规的自动完成功能，只有在您注册后才会创建完成信息。至于登录表单，我想保持自动完成，但只是禁用它放在输入字段上的哑色，因为里面的文本变得不可读——背景是黄色，文本颜色是白色（原始背景是深灰色） .

Google Chrome form autofill and its yellow background 的可能重复项

Pamela Joslyn

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

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 开发者的意图，只有结果。

Mr_Green

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

<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的厄运）？

MCBL

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

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

这对我有用 - 谢谢！（虽然我需要将白色更改为我真正想要的颜色）

显然是最佳答案。

rav_kr

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

Jason Kester

<form autocomplete="off">

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

太棒了，但它只解决了不太重要的问题；我怎样才能保持自动完成但失去样式（ prntscr.com/4hkh ） webkit 推到它的喉咙？ o: 不过谢谢

实际上，它应该两者兼而有之。该框只会变成黄色，让您知道 chrome/safari/ff 已使用您的密码自动填充它。如果你告诉它不要填充，它就没有机会给它上色。

是的，但看看我说的话：“我怎样才能保持自动完成但失去了 webkit 的风格”

autocomplete 的唯一问题是它在版本 5 之前的 HTML 中无效。

Kerry7777

这似乎对我有用：

输入{-webkit-background-clip：文本！重要； }

如果您想要透明背景，这是唯一的解决方案

@Kerry7777 这是唯一对我有用的解决方案。这是最简单的。你让我今天一整天都感觉很好

andstud.io

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

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

https://i.stack.imgur.com/3WE5U.png

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

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

Dmitriy Likhten

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

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

Alan Plum

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

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

Arjan

这解决了 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 次会不会有点苛刻？我知道它会起作用并且不会太慢。不过好像有点过分了。

zneak

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

background-color: white !important;

只有IE6不明白。

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

Chrome 在自动填充输入字段时似乎忽略了 !important

@Torandi这可能是因为用户代理样式表。用户代理样式表中的设置应最后应用，除非它具有 !important 指令，在这种情况下它优先于其他所有内容。您应该查看您的用户代理样式表（尽管我不知道在哪里可以找到它）。

whitehorse

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

使用 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='';" />

warfish

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

Thales Kenne

我能够使用这种方法删除自动填充颜色：

  // Workaround to remove autofill color from inputs
  input, select {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    -webkit-background-clip: text !important;
    background-clip:  text !important;
  }

据我测试，这适用于 iOS 上的 Safari 和 Chrome 以及 Android 上的 Chrome。

Ananay Gupta

对于特定情况，接受的答案可能是一个很好的答案，但我使用的是具有透明背景的角材料，最重要的是字段不是具有花哨边框等的“entre material field”。

我做了这个修改过的解决方案，它只是在任何自动填充伪元素上强制进行非常长的转换，因此除非用户设法在同一页面上停留相当多的 1000000000 或我已经将它设置为秒！

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 {
  transition: all 10000000s;
}

benzado

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

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

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

Adam

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

Ernests Karlsons

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

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

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

Mite

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

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

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

Kt Mack

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

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

TwystO

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

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

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

volodymyr3131

现代浏览器不支持自动完成关闭。我发现解决自动完成的最简单方法是使用 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 仍然填写注册和登录表单数据（。这只是某种奇怪的魔法，因为根据评论，在某些情况下它可以工作，并且在有些不是=）

我知道，这些标准并没有真正得到始终如一的遵循。真可惜，让我们的生活更加艰难:(

Vayodya Tamari

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

这对我有用

禁用“自动完成”不是一个好的 UX 解决方案。

Andrei

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

所以最终得到了@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;
}

Tobias Buschor

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

Kris

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

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

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

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

不适用于 chrome 和 safari。样式是 input:-webkit-autofill 而 input --webkit-autocomplete 根本不存在

@EliseuMonar：我很确定我没有撒谎，但不记得我如何或在哪里测试它的细节。代码本身可能是从内存中输入的，而不是复制/粘贴的，所以自动完成与自动填充？我不知道。

Per Lindberg

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

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

Opera 自动填充右边的 [form]。

Firefox 和 IE 不会自动填充。

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

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

关注公众号

想领先一步获取最新的外包任务吗？

相似问题

平台

支持

联系我们