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

Question

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

Answer 1

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

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

Answer 2

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

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

由于图标是影子内容，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 {
}

Answer 3

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

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

Answer 4

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

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

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

Answer 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...'阻止浏览器将该字段识别为'Please enter your user-name...'段 - 还要注意单词user之间的连字符和name - 单词之间没有连字符 - 弹出窗口仍然出现，因此它显示了浏览器正在检查的边缘情况。 请注意，我已经在此阶段修改了字段的name属性和相邻标签，以删除对触发关键字或其变体的引用。

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

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

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

Answer 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

Answer 7

即使可见性：隐藏或/和显示：无，Safari Ios 也会不断弹出图标和按钮。 对我来说，最好的解决方案是将不透明度设置为 0。这不会删除不需要的图标，而是使它们完全透明，因此不可见。 此外，它适用于您使用的任何背景颜色或 img。

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

Answer 8

答案都是正确的，但大多数只是治标不治本。 大多数情况下，您只需要检查您的名称属性。 如果您没有提供任何名称，请为您的输入命名。 这对我的情况有帮助，因为没有名字 safari 在识别可自动填充的输入时会出错