Chrome の自動入力によってフォントが変更されないようにするにはどうすればよいですか?

Chrome の自動入力フォント変更の課題を克服する

Windows で Chrome の自動入力機能が発生すると、迷惑なフォント変更の問題が発生する可能性があります。保存されたユーザー名の上にマウスを移動すると、フォント サイズとスタイルが変更され、フォームの配置が乱れます。この問題を軽減するために入力に固定幅を適用することもできますが、より効果的な解決策は、フォントの変更を完全に防ぐことです。

これを実現するには、特に :-webkit-autofill を対象とする CSS ルールを利用できます。疑似クラス。この疑似クラスは、Chrome のパスワード マネージャーによって自動的に入力されるフォームの領域に適用されます。このルール内のフォント ファミリー プロパティに important を適用すると、Chrome のデフォルトの動作をオーバーライドして、希望のフォント設定を維持できます。

SCSS でこれを実装する方法の例を次に示します。

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

または、次のルールのみを必要とすることもできます:

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

::first-line 擬似要素は、入力の最初の行をターゲットにしており、通常はここで自動入力が行われます。

これらの CSS ルールを組み込むことで、Chrome の自動入力フォントの変更を効果的に防ぎ、ログイン フォームの配置と美しさを維持できます。

以上がChrome の自動入力によってフォントが変更されないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。