如何隐藏 Safari 中 input 标签的 autofill 图标

最新推荐文章于 2024-06-21 10:54:26 发布

转载最新推荐文章于 2024-06-21 10:54:26 发布 · 310 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/philipding/p/8319512.html

文章标签：

#ui #javascript #ViewUI

本文介绍了如何在Safari浏览器中隐藏<input type=passport>标签的小锁图标，提供了有效的CSS代码，并解释了其工作原理，涉及ShadowDOM的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Safari 浏览器会为 <input type="passport"> 标签自动添加一个小锁的图标（如下图），本意上是让用户可以从这里选择相应的用户名/密码进行自动填充，但是在某些场景下需要将其隐藏，可能是出于安全性考虑，当然也有可能出于 UI 样式方面考虑。

从网上可以搜到很多种有效的解决方法，例如下面的代码就是其中之一，但是很少会告诉你为什么要这样做，以致于下次再遇到这样类似的问题时，还是要借助于 Google、Baidu。

input::-webkit-credentials-auto-fill-button {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
    position: absolute; /* 避免占用 input 元素额外的 padding，正常情况下存在 display: none!; 就可以了 */
    right: 0;
}

在了解为什么要这样做之前，我们需要稍微了解下什么是 Shadow DOM，简单点来说：

Shadow DOM 允许在 document 渲染时插入一个 DOM 元素子树，但是这课子树并不在主 DOM 树中。开发者可以利用 Shadow DOM 封装自己的 HTML 标签、CSS 样式和 JavaScript 代码。

在介绍 Shadow DOM 的所有例子中，最经典的就是 <video> 标签。在HTML中，我们只使用了一个 <video> 标签，但是在页面上却呈现了很多元素，例如，下载按钮、全屏按钮呀等等。这个就是 Shadow DOM 的功劳了，它在 document 渲染 <video> 元素时，在该元素的子树中插入了 <button>、<span> 等标签用来显示下载、全屏等一系列的元素。该原理同样适用于 <input type="passowrd"> 标签，虽然它的子树中的元素相对于 <video> 来说少的可怜。

我们可以通过下述方法在 Safari 中打开显示 Shadow DOM 的开关。