共用方式為


自訂密碼揭露按鈕

password Microsoft Edge 的輸入類型包含密碼揭露按鈕。 為了確保密碼輸入正確,使用者可以點擊 密碼揭露 按鈕或按 Alt+F8,以顯示密碼欄位中的字元。 你可以移除密碼揭露的控制,或自訂控制樣式。

預設情況下, 密碼揭露 按鈕是關閉的,因此 在密碼 欄位中,使用者輸入的字元會被點取代。 密碼揭露按鈕出現在密碼欄位右側,以眼睛形狀的圖示呈現:

眼睛形狀的圖示會出現在隱藏密碼文字的點旁邊

當使用者點擊密碼 揭露 按鈕開啟時,密碼文字會顯示,眼睛圖示上方會變成斜線:

原始密碼文字會被揭露,眼睛圖示上方有斜線

預設情況下,密碼揭露按鈕會插入所有設定type"password"的 HTML input 元素的 Shadow DOM 中。 從 Microsoft Edge 87 版本開始,使用者或 企業 可全域關閉此功能。 網頁設計師和開發者應該預期大多數 Microsoft Edge 用戶會使用預設的體驗。

移除密碼揭露控制

作為網頁作者,你可以完全移除 密碼揭露 按鈕,方法是針對 ::-ms-reveal 偽元素:

::-ms-reveal {
    display: none;
}

不過,你應該考慮利用 密碼揭露 按鈕。 原生 密碼揭露 按鈕內建了重要的 安全措施

自訂操作風格

你可以不完全移除控制,而是修改 密碼揭露 按鈕的樣式,使其更符合網站的視覺語言。 以下摘錄提供了此類風格的範例:

::-ms-reveal {
    border: 1px solid transparent;
    border-radius: 50%;
    box-shadow: 0 0 3px currentColor;
}

設定密碼揭露 按鈕時,請留意以下幾點:

  • 眼睛圖示作為背景影像實作。 若要在 密碼揭露 按鈕上加入背景色,請使用 CSS background-color 屬性而非 background 速寫屬性。

  • 你可以調整 密碼揭露 按鈕的大小和比例。

    注意事項

    瀏覽器會隱藏超出密碼輸入控制範圍的溢位。

  • 目前,沒有狀態選擇器可用來樣式化密碼 揭露 按鈕的切換狀態。

控制的可見性

密碼揭露按鈕在使用者輸入密碼欄位文字前無法使用。 為了保護使用者的密碼輸入安全,瀏覽器會在以下情境下抑制該按鈕:

  • 如果焦點從 密碼 欄位移開,瀏覽器會移除 密碼顯示 按鈕。

  • 如果腳本修改 了密碼 欄位,瀏覽器會移除 密碼顯示 按鈕。

若密碼 揭露 按鈕被移除,使用者必須刪除 密碼 欄位的內容,才能讓 密碼揭露 按鈕再次出現。 這種行為防止使用者在離開解鎖裝置時,對密碼做些微調整來顯示密碼。

如果密碼欄位被密碼管理器自動填入,密碼揭露按鈕將無法使用。