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

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

単一ページで複数のフォームを操作する場合、自動入力に関する問題が発生するのが一般的です。 -塗りつぶしと不要なハイライト。この記事では、HTML/CSS を利用して自動入力を無効にし、黄色の強調表示をオーバーライドすることに重点を置き、これらの問題に対処します。

自動入力の無効化

シャドウ内の強力な要素の使用は、新しい Chrome バージョンでは時代遅れになりました。別の方法は、次の方法で自動入力を抑制することです。

<input autocomplete="off" ...>

ハイライト色のオーバーライド

不要な黄色のハイライトをオーバーライドするには、次の CSS ルールを適用します。

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 50px your_background_color inset;
    -webkit-text-fill-color: your_font_color;
}

「your_background_color」を希望の背景色に置き換えます。 「your_font_color」を希望のフォントの色に置き換えます。

注: この解決策は、すべてのブラウザで完全に効果的であるとは限りません。 Firefox などの一部のブラウザでは、依然としてかすかな黄色のハイライトが表示される場合があります。

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