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

Windows で Chrome の自動入力機能を使用すると、迷惑なフォント変更の問題が発生する可能性があります。保存されたユーザー名の上にマウスを移動すると、フォント サイズとスタイルが変更され、フォームの配置が乱れます。この問題を軽減するために入力に固定幅を適用することもできますが、より効果的な解決策は、フォントの変更を完全に防ぐことです。これを実現するには、特に :-webkit-autofill を対象とした CSS ルールを利用できます。疑似クラス。この疑似クラスは、Chrome のパスワード マネージャーによって自動的に入力されるフォームの領域に適用されます。このルール内のフォント ファミリー プロパティに important を適用することで、Chrome のデフォルトの動作をオーバーライドし、希望のフォント設定を維持できます。

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

input { &:-webkit-autofill { &、 &:ホバー、 &:フォーカス { font-family: Times、「Times New Roman」、セリフ !重要; } } }

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

input { &:-webkit-autofill::first-line { font-family: Times、「Times New Roman」、セリフ !重要; } }

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

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