如果你想完全隐藏它，你可以使用下面的css技巧。基本上它会检测到“contacts-auto-fill-button”并将其从你的输入域中移走。确保你有“absolute：position”以避免从你的域中额外填充。

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

不必取消自动填充按钮的所有属性。
要完全隐藏Safari的图标，你也可以只隐藏它的** Package 器**。
由于图标是阴影内容，DOM不会显示，但阴影DOM会显示。只需打开检查器中的“〈〉”按钮。
在那里你会发现你可以像这样用css作为目标的 Package 容器：

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 {
}

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

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

相关：我想调整input[type="password"]的键图标的位置，但在任何地方都找不到伪元素选择器。
所以我克隆了webkit源代码，并且能够找到它：）
input::-webkit-credentials-auto-fill-button

注意-检查您的字段标签和任何placeholder属性值-因为这些也可能导致自动完成弹出窗口出现，尽管CSS样式规则被应用于相反的情况。

更多详情请参见下文...
需要注意的是，在Safari（至少是11+版本，可能还有更早的版本，以及其他最新的浏览器，例如Chrome、Firefox等）中，即使隐藏自动完成弹出窗口的各种CSS解决方案已经到位，如果该字段在浏览器中显示为用户名或密码字段，则自动完成字段仍然会出现。
我发现浏览器不仅检查<input>标签的name属性中的关键字，如username、login和类似的变体，而且似乎还考虑字段中任何placeholder属性文本的内容，以及最令人惊讶的是，与<input>字段相邻的任何文本，例如用作表单字段标签的文本。标签文本不需要放置到<label>标记中就能产生此效果-只需靠近字段即可，虽然我还没有机会广泛地测试和确定什么是“接近”-这将需要一些进一步的研究和实验，或在可能的情况下，审查各种网页浏览器渲染引擎的源代码-如WebKit。
因此，如果您有关键字word，如username，user name，login或类似的变体，以及password的变体，浏览器将显示自动完成弹出窗口时，该字段是焦点，尽管任何CSS规则试图隐藏它！
虽然我对<input>标记的name或placeholder属性值激活弹出窗口并不感到惊讶，但我惊讶地看到浏览器也考虑了标签文本。因此，我不得不改变字段的措辞和标签，以确保弹出窗口不会出现。例如，我发现将占位符文本从'Please enter your username...'修改为'Please enter your user-name...'会阻止浏览器将该字段识别为用户名字段-还请注意单词user和name之间的连字符-单词之间没有连字符-弹出窗口仍然出现，因此它显示了浏览器正在检查的边缘情况。注意，我已经修改了字段的name属性和相邻的标签，删除了对触发关键字或其变体的引用。
很明显，浏览器正在进行一些有趣的页面检查，以确定是否显示用户名/密码弹出窗口-虽然这是一个很好的整体行为，有助于鼓励用户利用密码管理器来实现更安全的凭据生成和存储，有时候你不希望自动完成弹出窗口出现。有使用-例如，在允许管理员管理员工用户帐户的管理界面中，您希望提供一个字段以按用户名搜索员工用户。在此类情况下，您不需要“Don“不要让自动完成弹出窗口尝试用您自己的用户名填充该字段，而是允许您输入任意数量的员工用户名。如果浏览器供应商能够采用标准的autocomplete='off'标志之一或将来的变体来提供对自动完成行为的清晰控制，或者一个标准的CSS属性，如果应用总是有预期的效果...但唉，这不是目前的情况。
不过，现在如果你在处理这个问题，请确保您也考虑了添加到任何用户名或密码<input>字段的任何placeholder属性的内容-以及附近出现的任何类似标签的文本。通过调整和试验这些标签/属性的值，您应该能够绕过页面-浏览器用来启用这些自动完成弹出窗口的检查逻辑。
与以往一样，由于一些浏览器的渲染引擎是封闭源代码的，这将可能继续是一门艺术，而不是科学，直到一个标准被开发出来，为所有平台上的所有浏览器提供对该功能的控制，而且可能有必要偶尔重新访问代码，根据新的浏览器版本进行检查，以确保弹出窗口不会由于页面检查逻辑的改变而重新出现。

如果你使用<input>字段而没有用<form>标签 Package 它，Safari 11+或最新版本会向你显示自动填充建议。

**选项1：**确保<input>元素 Package 在<form>元素内。不要将name属性的值设置为“username”或“login”。
**选项2：**添加name属性并将其值设置为“search”。<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

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

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

答案都是正确的，但是大多数都只是治标不治本。大多数情况下，你只需要检查你的name属性。如果你没有给予任何名称，给你的输入命名一些东西。这对我的情况很有帮助，因为没有名称safari在识别自动填充输入时会出错