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 的開關。

?

在顯示 Shadow DOM 后，我們可以清楚的看到?<input type="passport"> 中的小鎖是由?<div pseudo="-webkit-credentials-auto-fill-button"></div> 渲染的。

?

?

所以我們的問題就簡化為如何通過 CSS 隱藏相應的?<div>?。說到這里，相信大家也都明白文章開頭的 CSS 的作用以及為什么要這樣做了吧。

?

轉載于:https://www.cnblogs.com/philipding/p/8319512.html

總結

以上是生活随笔為你收集整理的如何隐藏 Safari 中 input 标签的 autofill 图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。