Chrome の自動入力によってフォントが変更されないようにするにはどうすればよいですか?-CSSチュートリアル-php.cn

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

DDD

リリース： 2024-10-26 06:25:30

オリジナル

507 人が閲覧しました

How to Prevent Chrome's Autofill from Changing Your Font?

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

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

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

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

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

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