如何阻止 Chrome 自動填入更改輸入欄位字體？

防止Chrome 自動填入導致輸入欄位的字型變更

Windows 上的Chrome 使用者在自動填入登入表單時可能會遇到一個登入表單時可能會遇到一個特殊的煩惱：字體將滑鼠懸停在已儲存的使用者名稱上時，使用者名稱或密碼輸入的變更。這個看似很小的問題可能會破壞表單元素的對齊。

為了防止這種字體更改，有些人可能會為輸入欄位設定固定寬度，但這只能掩蓋問題而不是解決問題。更理想的解決方案是從來源消除字體變更。

不幸的是，傳統的 CSS 技術，例如使用 :-webkit-autofill 定位輸入欄位並為字體相關屬性設定 !important ，已被證明在這種情況下無效。

但是，我們發現了一個巧妙的解決方法：

input {
  &:-webkit-autofill::first-line,
  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus,
  &:-webkit-autofill:active {
    font-family: Times, "Times New Roman", serif !important;
  }
}

此CSS 規則專門針對自動填充輸入字段中呈現的第一行文本，確保所需的內容即使在自動填滿過程中也會套用字體。

透過實作此解決方案，開發人員可以防止 Chrome 的自動填充機制導致不必要的字型更改，從而恢復登入表單的完整性。

以上是如何阻止 Chrome 自動填入更改輸入欄位字體？的詳細內容。更多資訊請關注PHP中文網其他相關文章！