Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。
インタラクション Limited support

:autofill

ブラウザがフォームを自動入力した際に適用される独自のスタイル（多くの場合は黄色い背景色）をカスタマイズできます。ブランドデザインを損なわないフォームUIを維持するために重要です。特にダークテーマのサイトでは、自動入力のデフォルトスタイルが目立つため、この擬似クラスの活用が効果的です。

フォーム擬似クラス

概要

ブラウザがフォームを自動入力した際に適用される独自のスタイル（多くの場合は黄色い背景色）をカスタマイズできます。ブランドデザインを損なわないフォームUIを維持するために重要です。特にダークテーマのサイトでは、自動入力のデフォルトスタイルが目立つため、この擬似クラスの活用が効果的です。

対応ブラウザ

デスクトップ

Chrome 110+
Edge 110+
Safari 15+
Firefox 未対応

モバイル

Chrome Android 110+
Safari iOS 15+
Firefox Android 未対応

基本構文

CSS 
input:autofill {
  background-color: #e8f0fe;
  border: 1px solid #4285f4;
  color: #333;
}

実務での使いどころ

  • 自動入力フィールドのデザイン統一

    ブラウザの自動入力時にデフォルトの黄色い背景ではなく、サイトのデザインに合った色やスタイルを適用できます。

注意点

  • Firefoxでは標準の :autofill はまだ未サポートです。:-webkit-autofill をフォールバックとして併用してください。

アクセシビリティ

  • 自動入力されたフィールドのスタイルを変更する際は、入力済みであることがユーザーに視覚的に分かるようにしてください。完全に背景色を透明にするとユーザーが混乱する可能性があります。

参考リンク