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

Question

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

原文由 Kris Jones 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Jimba Tamang 发布，翻译遵循 CC BY-SA 3.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 {
}

原文由 Gwerty 发布，翻译遵循 CC BY-SA 3.0 许可协议