ブラウザフォームの自動入力と入力の強調表示をオーバーライドするにはどうすればよいですか?

ブラウザのフォーム入力と入力の強調表示をオーバーライドする

背景

ユーザーは、ブラウザ上の 2 つのフォームでのフォームの自動入力と入力の強調表示に関する課題に直面しています。同じページを使用すると、望ましくない動作や視覚的な問題が発生します。

解決策

ブラウザのデフォルトのスタイルと自動入力をオーバーライドするには、-webkit-autofill 疑似クラスを使用するのが効果的な方法です。これにより、ブラウザによってフォーム要素が自動的に入力されるときの外観を制御できます。

自動入力の防止

フォーム フィールドの自動入力を防止するには、ページの読み込み時に背景のシャドウをトリガーして、効果的にブラウザをだましてフィールドがすでに存在していると信じ込ませることができます。 Populated.

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

注: この方法は、Chrome の最新バージョンでは機能しなくなりました。

入力ハイライトの削除

入力フィールドにフォーカスしたときに黄色の背景のハイライトを削除するには、-webkit-box-shadow プロパティを再度使用してオーバーライドします。ブラウザのデフォルトのスタイル。

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

これらの CSS ルールを実装すると、ブラウザの自動入力を効果的に無効にし、フォーム入力の外観を制御して、一貫した望ましいユーザー エクスペリエンスを実現できます。

以上がブラウザフォームの自動入力と入力の強調表示をオーバーライドするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。