Chrome 自動填入字型問題：如何防止使用者名稱/密碼欄位字型變更？

字體問題：防止Chrome 的自動填充字體變更

在Windows 上的Chrome 欄位中自動填入使用者名稱和密碼欄位時，使用者可能會遇到一個奇怪的問題：輸入的字體會改變。這種轉變破壞了表單的對齊方式，引起了開發人員的擔憂。

雖然設定固定輸入寬度提供了表面解決方案，但它無法解決根本問題。 我們能有效地完全阻止字體變化嗎？

在嘗試了各種CSS 技術後，我們發現了一個簡單而有效的修復方法：

<code class="css">input {
  -webkit-autofill-highlight-color: transparent;
  -webkit-autofill-highlight-box-shadow: none;
  -webkit-autofill::first-line {
    font-family: Times, "Times New Roman", serif !important;
  }
}</code>

透過修改這些瀏覽器特定的樣式，我們防止與自動填充相關的不一致：

• -webkit-autofill-highlight-color：透明;停用預設突出顯示。
• -webkit-autofill-highlight-box-shadow: none; 刪除自動填充欄位周圍的視覺提示。
• -webkit-autofill::first-line { font-family : ...; } 明確設定第一行的字體，從而控制外觀。

將 CSS 規則限制為 ::-webkit-autofill 確保它只影響 Chrome在 Windows 上。其他瀏覽器和作業系統不會受到影響。

透過利用這些客製化樣式，我們可以有效防止字體更改，同時保持自動填充功能。

以上是Chrome 自動填入字型問題：如何防止使用者名稱/密碼欄位字型變更？的詳細內容。更多資訊請關注PHP中文網其他相關文章！