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

Question

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

Answer 1

如果要完全隐藏它,可以使用以下css技巧.基本上它会检测到"contacts-auto-fill-button"并将其从输入字段移开.确保你有'绝对:位置',以避免从你的字段中额外填充.

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会显示它.只需打开检查器中的"<>" - 按钮即可.

你可以在那里找到你可以用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