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

Question

我的每个输入字段都有一个带有箭头的小人物图标。如何禁用它？顺便说一下，我有任何其他类似的页面，并没有发生。我尝试关闭Web检查器中的所有样式，并且一个页面仍然有图标。所以我不知道它是css还是html。

Answer 1

如果要完全隐藏它，可以使用以下css技巧。基本上它会检测到＆＃39;联系人 - 自动填充按钮＆＃39;并将其从输入字段移开。确保你有绝对的位置＆＃39;避免从你的田地里额外填充。

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

Answer 2

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

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

由于图标是Shadow Content，因此DOM不会显示它，但DOM会显示它。只需打开检查器中的“＆lt;＆gt;”按钮即可。

在那里你可以找到你可以用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;
    pointer-events: none;
    position: absolute;
    right: 0;
}

Answer 4

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

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

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

Answer 5

请注意-还要检查字段标签和任何placeholder属性值-因为尽管相反，CSS样式规则也可能导致自动完成弹出窗口出现。 < / p>

有关更多详细信息，请参见下文...

---

应该注意的是，在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属性提供这种干净的控制（如果应用此属性始终可以达到预期的效果），那就太好了。 ，但是现在还不是这种情况。

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

与网络一样，由于某些浏览器的渲染引擎是开源的，因此在开发出一种标准以为所有浏览器提供对该功能的控制之前，这将继续是一门艺术而非一门科学。所有平台，有时可能需要重新访问该代码，以针对新的浏览器版本进行检查，以确保由于页面检查逻辑的更改而不会重新显示弹出窗口。

Answer 6

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

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

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

注意：在autocomplete="off"和autocomplete="false"上使用<form>或<input>并没有帮助。 添加以下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;
}