如何在输入字段中隐藏自动填充 Safari 图标答案

【问题标题】：How to hide autofill safari icon in input field如何在输入字段中隐藏自动填充 Safari 图标
【发布时间】：2016-12-04 10:50:56
【问题描述】：

我的每个输入字段都有 safari 中带有箭头的小人物图标。我该如何禁用它？顺便说一句，我有任何其他类似的页面，但没有发生。我尝试关闭网络检查器中的所有样式，并且一页仍然有图标。

【问题讨论】：

所以看起来 Safari 实际上正在解析我的文本。这应该是一个管理员类型的页面，您可以在其中输入客户信息。 Safari 希望用户输入自己的信息。如何禁用图标？
我为此写了一篇博客：jrnv.nl/…

标签： html css safari

【解决方案1】：

如果你想完全隐藏它，你可以使用下面的 css 技巧。基本上它会检测到“联系人自动填充按钮”并将其从您的输入字段中移开。确保您有 'absolute:position' 以避免字段中的额外填充。

input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}

【讨论】：

我很好奇...这对任何人都有效吗？如果不关闭 Safari 偏好设置中的自动填充功能，我无法隐藏自动填充按钮。
@Derick 我认为即使您在字段上有 autocomplete="off" ，您仍然会得到那个丑陋的“用户”图标，在这种情况下，我们会强制隐藏该图标。关闭首选项自动填充是不同的核心解决方案，我们（开发人员）不能强迫用户这样做。
对于 Safari 11 {visibility: hidden} 就足够了
嘿 @JimbaTamang - 这个 CSS 帮助我隐藏了右侧的联系人图标。即使，当我键入列表中存在的联系人时，它也会显示包含这些联系人的下拉列表。有没有办法隐藏它？
@TibinPaul 你能在某个地方设置演示以便我们看看吗？

【解决方案2】：

相关：我想调整input[type="password"] 的钥匙图标的位置，但在任何地方都找不到伪元素选择器。

所以我克隆了 webkit 源并且能够找到它:)

input::-webkit-credentials-auto-fill-button

【讨论】：

【解决方案3】：

在input 密码字段中隐藏自动填充 Safari 图标：

::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    position: absolute;
    right: 0;
}

【讨论】：

pointer-events: none 是多余的。 visibility: hidden 已经阻止了指针事件。

【解决方案4】：

您不必取消自动填充按钮的所有属性。

要完全隐藏 Safari 的图标，您也可以只隐藏其包装器。

由于图标是影子内容，DOM 不会显示它，但影子 DOM 会显示。只需打开检查器中的“”按钮即可。

在那里你会找到你可以像这样使用 css 定位的包装容器：

input::-webkit-textfield-decoration-container {
  display: none; /* or whatever styling you want */
}

您会在里面找到密码钥匙串和大写锁定指示器：

input::-webkit-caps-lock-indicator {
}

input::-webkit-credentials-auto-fill-button {
}

哦，当您使用它时，不要忘记带有清晰按钮和密码眼睛图标的 IE：

input::-ms-clear {
}

input::-ms-reveal {
}

【讨论】：

这似乎是最好的答案。
这也消除了所有占位符文本以及图标。

【解决方案5】：

请注意 - 检查您的字段标签和任何 placeholder 属性值 - 因为这些也可能导致出现自动完成弹出窗口，尽管 CSS 样式规则被应用于相反的情况。

详情见下文...

应该注意的是，在 Safari（至少是 11+ 版本，也可能是更早的版本，以及其他最近的浏览器，例如 Chrome、Firefox 等）中，即使隐藏自动完成弹出窗口的各种 CSS 变通方法在地方，如果该字段似乎是浏览器的用户名或密码字段，那么自动完成字段仍然出现。

我发现浏览器不仅会检查<input>标签的name属性中是否有username、login和类似变体等关键字，而且似乎还会考虑任何placeholder属性文本的内容在字段上，以及最令人惊讶的是，与 <input> 字段相邻的任何文本，例如用作表单字段标签的文本。标签文本不需要放置在<label> 标签中即可产生这种效果——只是为了靠近该字段，尽管我没有机会广泛测试并确定什么被认为是“近距离”——这将需要一些进一步的研究和实验，或者在可能的情况下，审查各种 Web 浏览器渲染引擎的源代码 - 例如 WebKit。

因此，如果您有诸如 username、user name、login 或类似变体之类的关键字词，以及 password 的变体，浏览器将在该字段被聚焦时显示自动完成弹出窗口，尽管任何 CSS 规则都可以尝试隐藏它！

虽然看到<input> 标签的name 或placeholder 属性值激活弹出窗口我并不感到惊讶，但我惊讶地看到浏览器也考虑了标签文本，因为我有更改字段的措辞和标签，以确保不会出现弹出窗口。例如，我发现将占位符文本从 'Please enter your username...' 修改为 'Please enter your user-name...' 会阻止浏览器将该字段识别为用户名字段 - 还要注意单词 user 和 name 之间的连字符 - 单词之间没有连字符 -弹出窗口仍然出现，因此它显示了浏览器正在检查的边缘情况。作为说明，我已经在此阶段修改了该字段的 name 属性和相邻的标签，以删除对触发关键字或其变体的引用。

很明显，浏览器正在执行一些有趣的页面检查以确定是否显示用户名/密码弹出窗口 - 虽然这是一种很好的整体行为，有助于鼓励用户利用密码管理器来更安全地生成和存储凭证，但是您不希望出现自动完成弹出窗口的时候。有一些用例，例如在管理界面中，允许管理员管理员工用户帐户，例如，您希望提供一个字段来按用户名搜索员工用户。在这种情况下，您不希望自动完成弹出窗口尝试使用您自己的用户名填充该字段，而是允许您输入任意数量的员工用户名。如果浏览器供应商可以采用标准autocomplete='off' 标志之一或未来的变体来提供对自动完成行为的清晰控制，或者如果应用总是具有预期效果的标准 CSS 属性，那就太好了……但是唉，目前情况并非如此。

但是，现在，如果您正在处理此问题，请确保您还考虑添加到任何用户名或密码 <input> 字段的任何 placeholder 属性的内容 - 以及任何类似标签的文本出现在附近。通过调整和试验这些标签/属性的值，您应该能够绕过浏览器用来启用这些自动完成弹出窗口的页面检查逻辑。

与 Web 一样，由于某些浏览器的渲染引擎是封闭源代码的，这可能会继续成为一门艺术而不是科学，直到开发出一个标准来为所有浏览器提供对该功能的控制所有平台，并且可能需要偶尔重新访问代码以针对新的浏览器版本检查它，以确保弹出窗口不会由于更改的页面检查逻辑而重新出现。

【讨论】：

【解决方案6】：

如果您使用 <input> 字段而不将其包装在 <form> 标记中，Safari 11+ 或最新版本会向您显示自动填充建议。所以这就是你可以做的。

选项 1： 确保 <input> 元素被包裹在 <form> 元素中。不要将 name 属性的值设置为“username”或“login”。

选项 2： 添加name 属性并将其值设置为“搜索”。 <input type="text" name="search">

注意：在<form> 和<input> 上使用autocomplete="off" 或autocomplete="false" 将无济于事。添加以下 CSS 属性都不起作用。

input::-webkit-autofill,
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button

【讨论】：

【解决方案7】：

即使有 visibility:hidden 或/和 display:none Safari Ios 也会不断弹出图标和按钮。对我来说，最好的解决方案是将不透明度设置为 0。这不会删除不需要的图标，但会使它们完全透明，因此不可见。此外，它适用于您使用的任何背景颜色或图像。

input::-webkit-contacts-auto-fill-button {
opacity: 0;
}

【讨论】：