从输入中删除 Safari 联系人下拉列表

Question

在输入字段中输入时，Safari 会创建一个基于下拉列表的联系人。我不知道如何隐藏这个下拉菜单。我可以隐藏联系人按钮。

我正在运行 Safari 版本 11.0.1

小提琴重现：

https://jsfiddle.net/27n5jL40/1/

<input type="text" name="fname"><br>

隐藏自动填充按钮

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

Answer 1

好吧，我意识到这个答案可能来得有点晚，但我想我可以提供帮助。我凭经验发现 Safari 从 a) 字段名称、b) 相关标签或 c) 相邻文本中获取提示。它计算出字段名称“name”、“firstname”、“lastname”，以及标签或相邻文本，如“name”、“First name”、“Last name”。

在我的应用程序中，它与自定义自动填充竞争。我击败了我的下拉列表：

我将字段名称从xx_firstname 更改为mxyzptlk，并将标签从First Name 更改为F‌irst N‌ame。 ‌ 字符是零宽度非连接符。你在屏幕上看不到它，但它似乎打败了 Safari——至少现在是这样！

希望我能找到一些聪明的 css，但这是我能想到的最好的了。