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 中国語 Web サイトの他の関連記事を参照してください。