如何隐藏在输入字段

我的输入字段的每个人都有与Safari中的箭头小人图标的自动填充Safari浏览器的图标。如何禁用该功能？顺便说一下，我还有其他类似的页面，但这并没有发生。我尝试关闭网络检查器中的所有样式，并且一个页面仍然有图标。所以我不知道它是CSS还是HTML。如何隐藏在输入字段

来源

2016-07-29 Kris Jones

所以它看起来像S afari实际上是解析我的文本。这应该是您输入客户信息的管理类型页面。 Safari希望用户输入自己的信息。如何禁用图标？ –

我写了一篇关于这个博客：https://jrnv.nl/hiding-safaris-contact-auto-fill-when-autocomplete-is-turned-off-c415b2257df8 – jeroenvisser101

如果你想完全隐藏它，你可以使用下面的CSS技巧。基本上，它检测到'contacts-auto-fill-button'并将它从输入字段中移开。确保你有'绝对：位置'，以避免你的领域的额外填充。

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

来源

2016-10-05 23:11:38

我很好奇...这是工作的人？我无法隐藏自动填充按钮，而无需在Safari偏好设置中关闭自动填充功能。 – Derick

@Derick我认为情况是，你仍然能丑“用户”图标，即使你有自动完成=上领域“关”，在这种情况下，我们有力地隐藏了图标。在首选项中关闭自动填充是不同的核心解决方案，我们（开发人员）不能强制用户这样做。 –

对于Safari浏览器11'{visibility：hidden的}'足够 –

相关：我想调整为input[type="password"]的钥匙图标的位置，但找不到任何地方伪元素选择。

所以我克隆WebKit的来源，是能够找到它:)在输入密码字段

input::-webkit-credentials-auto-fill-button

来源

2017-02-28 03:37:24

隐藏自动填充Safari浏览器的图标

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

来源

2017-02-28 18:20:28 Vadizar

'pointer-events：none'是多余的。可见性：隐藏已经可以防止指针事件。 – aleclarson

你不必全部取消自动填充按钮的属性。

要完全隐藏Safari的图标，您还可以隐藏其包装。

由于图标阴影内容时，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 { 
}

来源

2017-09-07 08:57:41 Gwerty

这似乎是最好的答案。 –

如何隐藏在输入字段

回答

相关问题