ホームページ > ウェブフロントエンド > CSSチュートリアル > デフォルトのブラウザフォームの自動入力と強調表示を CSS でオーバーライドするにはどうすればよいですか?

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

Susan Sarandon
リリース: 2024-12-07 05:38:16
オリジナル
348 人が閲覧しました

How Can I Override Default Browser Form Autofill and Highlighting with CSS?

CSS でデフォルトのブラウザ フォームの動作をオーバーライドする

Web ブラウザは多くの場合、フォーム フィールドに自動入力し、入力フィールドを黄色の背景で強調表示します。一部のユーザーにとっては便利ですが、特定のシナリオでは望ましくない場合があります。 HTML と CSS でこれらのデフォルトの動作をオーバーライドする方法を見てみましょう。

フォームの自動入力を無効にする

フォームの自動入力を防ぐには、フォームタグ。例:

<form autocomplete="off">
  ...
</form>
ログイン後にコピー

ただし、この属性はすべてのブラウザで完全にサポートされているわけではありません。

入力ハイライトを削除

デフォルトをオーバーライドするには入力フィールドを黄色の背景で強調表示するには、次の CSS ルールを使用します:

input:-webkit-autofill {
  background-color: #fff !important; /* Change to desired color */
}
ログイン後にコピー

このコードブラウザによって自動入力される入力フィールドの背景色を設定します。 ! important を使用すると、このルールが他のスタイルよりも優先されるようにすることができます。

追加のヒント

上記の CSS ルールが新しいバージョンで機能しない場合Chrome をお使いの場合は、次のトリックを使用してみてください:

input:-webkit-autofill {
  box-shadow: 0 0 0 50px white inset; /* Change color to background */
  -webkit-text-fill-color: #333;
}
ログイン後にコピー

これにより、入力フィールドの周囲に「強い」シャドウが作成され、入力フィールドが効果的に隠されます。黄色の背景。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート