Chrome 自動入力フォントのトラブル: ユーザー名/パスワード フィールドのフォント変更を防ぐには?

フォントの問題: Chrome の自動入力フォント変更の防止

Windows 上の Chrome でユーザー名とパスワードのフィールドを自動入力するときに、ユーザーは興味深い問題に遭遇する可能性があります。入力のフォントが変わります。この変更によりフォームの配置が乱れ、開発者に懸念をもたらします。

固定入力幅の設定は表面的な解決策にはなりますが、根本的な問題には対処できません。 フォントの変更を完全に効果的に防ぐことはできますか?

さまざまな CSS テクニックを試した結果、簡単で効果的な修正方法を発見しました。

<code class="css">input {
  -webkit-autofill-highlight-color: transparent;
  -webkit-autofill-highlight-box-shadow: none;
  -webkit-autofill::first-line {
    font-family: Times, "Times New Roman", serif !important;
  }
}</code>

これらを変更することで、ブラウザ固有のスタイルを使用して、自動入力関連の不一致を防ぎます。

• -webkit-autofill-highlight-color:parents; デフォルトの強調表示を無効にします。
• -webkit-autofill-highlight-box-shadow: none; は、自動入力フィールドの周囲の視覚的なキューを削除します。
• -webkit-autofill::first-line { font-family : ...; } は最初の行のフォントを明示的に設定し、それによって外観を制御します。

CSS ルールを ::-webkit-autofill に制限することで、Chrome にのみ影響することが保証されます。 Windows 上で。他のブラウザやオペレーティング システムは影響を受けません。

これらのカスタマイズされたスタイルを活用することで、自動入力機能を維持しながらフォントの変更を効果的に防止します。

以上がChrome 自動入力フォントのトラブル: ユーザー名/パスワード フィールドのフォント変更を防ぐには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。