Chrome の自動入力による入力フィールドのフォントの変更を停止する方法

入力フィールドでの Chrome の自動入力によるフォント変更の防止

Windows 上の Chrome ユーザーは、ログイン フォームの自動入力時に特有の煩わしさに遭遇する可能性があります: フォント保存されたユーザー名の上にマウスを置くと、ユーザー名またはパスワードの入力が変更されます。この一見小さな問題は、フォームの要素の配置を混乱させる可能性があります。

このフォントの変更を防ぐために、入力フィールドに固定幅を設定することに頼る人もいるかもしれませんが、これは問題に対処するのではなく、問題を隠すだけです。より望ましい解決策は、フォントの変更をソースから排除することです。

残念ながら、:-webkit-autofill で入力フィールドをターゲットにしたり、フォント関連のプロパティに ! 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 サイトの他の関連記事を参照してください。