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

How to hide autofill safari icon in input field

提问by Kris Jones

Every one of my input fields has the little person icon with the arrow in safari. How to I disable that? By the way, I have any other similar page and that's not happening. I tried turning off all styles in the web inspector and the one page still has the icon.

我的每个输入字段都有带有 safari 箭头的小人物图标。我如何禁用它？顺便说一句，我有任何其他类似的页面，但没有发生。我尝试关闭网络检查器中的所有样式，但一页仍然有图标。

回答by Jimba Tamang

If you want to hide it completely, you can use the following css tricks. Basically it detect that 'contacts-auto-fill-button' and move it away from your input field. Make sure you have 'absolute:position' to avoid extra padding from your fields.

如果你想完全隐藏它，你可以使用以下css技巧。基本上它会检测到“联系人自动填充按钮”并将其从您的输入字段中移开。确保您有 'absolute:position' 以避免从您的字段中添加额外的填充。

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

回答by Gwerty

You don't have to cancel all properties of the autofill buttons.

您不必取消自动填充按钮的所有属性。

To hide Safari's icons altogether, you can also just hide its wrapper.

要完全隐藏 Safari 的图标，您也可以只隐藏其wrapper。

As the icons are Shadow Content, the DOM won't show it but the shadow DOM does. Just turn on the '<>'-button in the inspector.

由于图标是影子内容，DOM 不会显示它，但影子 DOM 会显示。只需打开检查器中的“<>”按钮。

There you'll find the wrapping container you can target with css like this:

在那里，您会找到可以使用 css 定位的包装容器，如下所示：

input::-webkit-textfield-decoration-container {
  display: none; /* or whatever styling you want */
}

Inside you will find the password keychain and the caps-lock indicator:

在里面你会找到密码钥匙串和大写锁定指示器：

input::-webkit-caps-lock-indicator {
}

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

Oh, and while you're at it, don't forget IE with its clear buttons and password eye icons:

哦，当您使用它时，请不要忘记带有清晰按钮和密码眼睛图标的 IE：

input::-ms-clear {
}

input::-ms-reveal {
}

回答by Vadizar

Hide autofill Safari icon in inputpassword field:

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

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

回答by Stephen Chai

Related: I wanted to adjust the position of the the key icon for a input[type="password"]but couldn't find the pseudo element selector anywhere.

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

So I cloned the webkit source and was able to find it :)

所以我克隆了 webkit 源代码并且能够找到它:)

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

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

回答by bluebinary

As a note – check your field labels and any placeholderattribute values too – as these can also cause autocomplete popups to appear, despite CSS styling rules being applied to the contrary.

请注意——检查你的字段标签和任何placeholder属性值——因为这些也会导致自动完成弹出窗口出现，尽管 CSS 样式规则被应用到相反的地方。

See below for more detail...

请参阅下文了解更多详情...

---

---

It should be noted that in Safari (version 11+ at least, and likely earlier versions too, and other recent browsers, e.g. Chrome, Firefox, etc), that even if the various CSS workarounds to hide the autocomplete popups are in place, if the field appears to be a username or password field to the browser, then the autocomplete field still appears.

应该注意的是，在 Safari（至少 11+ 版本，也可能是更早的版本，以及其他最近的浏览器，例如 Chrome、Firefox 等）中，即使隐藏自动完成弹出窗口的各种 CSS 变通方法已经到位，如果该字段似乎是浏览器的用户名或密码字段，然后自动完成字段仍会出现。

I found that the browser is not only checking the <input>tag's nameattribute for keywords such as username, loginand similar variants, but also appears to consider the contents of any placeholderattribute text on the field, as well as most surprisingly, any text adjacent to the <input>field such as that used as a form field label. The label text does not need to be placed into a <label>tag to have this effect - just to be in close proximity to the field, although I haven't had opportunity to extensively test and determine what is considered 'close proximity' - this will require some further research and experimentation or where possible, review of the various web browser rendering engines' source code - such as for WebKit.

我发现浏览器不仅会检查<input>标签name属性中的关键字，例如username,login和类似的变体，而且似乎还会考虑placeholder字段上任何属性文本的内容，以及最令人惊讶的是，与该<input>字段相邻的任何文本，例如用作表单字段标签。标签文本不需要被放置到<label>标签中来产生这种效果 - 只是靠近现场，虽然我没有机会广泛测试和确定什么被认为是“接近” - 这将需要一些进一步的研究和实验，或者在可能的情况下，各种 Web 浏览器渲染引擎的源代码 - 例如 WebKit。

As such if you have keywords word such as username, user name, loginor similar variants, as well as variants for password, the browser will show the autocomplete popup when the field is focussed, despite any CSS rules to try and hide it!

因此，如果你有一个关键字词，例如username，user name，login或类似的变形，以及为变种password，浏览器会显示在该领域聚焦在自动完成弹出，尽管任何CSS规则，试图隐藏它！

While I was not as surprised to see the popup being activated by the <input>tag's nameor placeholderattribute values, I was surprised to see that label text was considered too by the browser, as such I had to change the wording and labelling of the fields to ensure the popups did not appear. I found for example modifying the placeholder text from 'Please enter your username...'to 'Please enter your user-name...'prevented the browser from recognizing the field as a username field – also notice the hyphen between the words userand name– without the hyphen between the words – the popup still appeared, so it shows how may edge cases the browsers are checking for. As a note, I had already modified the field's nameattribute and the adjacent labelling by this stage to remove references to the triggering keywords or their variants.

虽然看到<input>标签name或placeholder属性值激活弹出窗口并不让我感到惊讶，但我惊讶地发现浏览器也考虑了标签文本，因此我不得不更改字段的措辞和标签以确保弹出窗口没有出现。我发现，例如，从修改的占位符文本'Please enter your username...'，以'Please enter your user-name...'防止浏览器识别字段作为用户名字段-也注意到词之间的连字符user和name-无字之间的连字符-弹出仍然出现，所以它显示了如何可能的边缘情况浏览器正在检查。作为说明，我已经修改了该字段的name此阶段的属性和相邻标签以删除对触发关键字或其变体的引用。

It is clear that browsers are doing some interesting page inspection to determine if to show username/password popups - and while this is great overall behavior that helps encourage users to take advantage of password managers for more secure credential generation and storage, there are times when you don't want the autocomplete popup to appear. There are use-cases such as within an admin interface that allow administrators to manage staff user accounts for example - where you want to offer a field to search for a staff user by their username. In cases like this you don't want the autocomplete popup to try and fill the field with your own username, but rather allow you to enter any number of staff usernames for example. It would be great if one of the standard autocomplete='off'flags or a future variant could be adopted by the browser vendors to provide this clean control of the autocomplete behavior or a standard CSS attribute that if applied always had the intended effect... but alas this is not currently the case.

很明显，浏览器正在做一些有趣的页面检查，以确定是否显示用户名/密码弹出窗口 - 虽然这是一个很好的整体行为，有助于鼓励用户利用密码管理器来更安全地生成和存储凭据，但有时您不希望出现自动完成弹出窗口。有一些用例，例如在管理界面中，允许管理员管理员工用户帐户，例如 - 您希望提供一个字段以通过其用户名搜索员工用户。在这种情况下，您不希望自动完成弹出窗口尝试使用您自己的用户名填充该字段，而是允许您输入任意数量的员工用户名。如果标准之一就好了autocomplete='off'浏览器供应商可以采用标志或未来的变体来提供对自动完成行为或标准 CSS 属性的这种干净控制，如果应用它总是具有预期的效果......但可惜目前情况并非如此。

For now however, if you are dealing with this issue, make sure you are also considering the contents of any placeholderattribute you have added to any username or password <input>fields - as well as any label-like text that appears nearby. By adjusting and experimenting with the values of these labels/attributes you should be able to work around the page-inspection logic the browsers are using to enable these autocomplete popups.

但是，就目前而言，如果您正在处理此问题，请确保您还考虑placeholder添加到任何用户名或密码<input>字段的任何属性的内容- 以及出现在附近的任何类似标签的文本。通过调整和试验这些标签/属性的值，您应该能够解决浏览器用来启用这些自动完成弹出窗口的页面检查逻辑。

As always with the web, and as some of browser's rendering engines are closed-source, this will likely continue to be more of an art than a science, until a standard is developed to provide control of this feature for all browsers on all platforms, and it may be necessary to occasionally revisit the code to check it against new browser versions to ensure that popups are not re-appearing due to changed page-inspection logic.

与 Web 一样，并且由于某些浏览器的渲染引擎是闭源的，因此这可能会继续成为一门艺术而不是科学，直到开发出一个标准来为所有平台上的所有浏览器提供对该功能的控制，并且可能需要偶尔重新访问代码以针对新的浏览器版本进行检查，以确保弹出窗口不会由于更改的页面检查逻辑而重新出现。

回答by Muhammad Tahir

If you use <input>field without wrapping it in <form>tag, Safari 11+ or latest would show you auto-fill suggestion. So here is what you can do.

如果您使用<input>字段而不将其包装在<form>标签中，Safari 11+ 或最新版本会向您显示自动填充建议。所以这就是你可以做的。

Option 1:Make sure <input>elements are wrapped inside <form>element. Don't set value of name attribute to "username" or "login".

选项 1：确保<input>元素被包裹在<form>元素内。不要将 name 属性的值设置为“username”或“login”。

Option 2:Add nameattribute and set its value as "search". <input type="text" name="search">

选项 2：添加name属性并将其值设置为“搜索”。<input type="text" name="search">

Note:Using autocomplete="off"or autocomplete="false"on either <form>and <input>would not help. Neither adding following CSS properties would work.

注：使用autocomplete="off"或autocomplete="false"在任<form>并<input>不会帮助。添加以下 CSS 属性都不起作用。

input::-webkit-autofill,
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button

回答by Rob

Even with visibility:hidden or/and display:none Safari Ios keeps popping up icons and buttons. For me, the best solution was to set opacity to 0. This doesn't remove unwanted icons, but makes them completely transparent, and thus invisible. Furthermore, it works on whatever background color or img you're using.

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

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