如何隱藏在輸入字段

我的輸入字段的每個人都有與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

這似乎是最好的答案。 –

如何隱藏在輸入字段

回答

相關問題