如何防止 Chrome 自動填入期間字體變更？

在Chrome 中自動填入期間防止字型變更

在Windows 上的Chrome 中使用內建密碼管理器自動填入使用者名稱和密碼欄位時，字型會發生變化，這可能會破壞對齊。本文旨在提供防止字體變更的修復程序。

儘管嘗試使用 -webkit-autofill 和 !important 標籤修改輸入的 CSS，但字體變更仍然存在。更有效的解決方案是針對經歷變更的輸入的特定部分。

透過利用 :first-line 偽元素，您可以隔離和修改自動填入輸入中的第一行文字。以下CSS程式碼將確保字體保持一致：

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

這專門針對自動填入輸入的第一行，覆蓋預設字體變更。在某些情況下，其他元素也可能受到字體變更的影響。為了解決這個問題，您可以擴展CSS 程式碼以定位其他元件：

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中文網其他相關文章！