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

HTML/CSS を使用したフォームの自動入力と入力の強調表示のオーバーライド

Web 開発では、ブラウザーによって生成された自動入力の候補と入力の強調表示を削除すると、特に処理時に問題が発生する可能性があります。同じページに複数のフォームがある場合。この記事では両方の問題に対処し、自動入力を無効にして背景の黄色の強調表示を削除する解決策を提供します。

自動入力:

ブラウザは、以前に入力した情報を自動的に提案します。入力フィールド。一部のユーザーにとっては便利ですが、同じページ上の異なるフォームを自動入力しないと問題になる可能性があります。特定の入力の自動入力を無効にするには、autocomplete 属性を使用します:

<form>
  <input type="text" name="username" autocomplete="off">
  <input type="password" name="password" autocomplete="off">
  <input type="submit" value="Submit">
</form>

入力の強調表示:

デフォルトでは、ブラウザは入力フィールドに黄色の背景を適用します。集中しています。この動作は CSS を使用してオーバーライドできます。 :focus 疑似クラスは、現在フォーカスされている要素をターゲットとします。 CSS を使用して黄色のハイライトを削除する方法は次のとおりです:

input:focus {
  background-color: transparent;
}

ただし、この解決策は最新バージョンの Chrome では機能しなくなっていることに注意してください。代わりに、次のハックを使用してください:

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50px white inset; /* Change the color to your own background color */
  -webkit-text-fill-color: #333;
}

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

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