从输入中删除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，但这是我能想到的最好的方法。