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

:autofill

:autofill は CSS の擬似クラスで、 <input> 要素の値がブラウザーによって自動補完された時に一致します。このクラスはユーザーがフィールドを編集すると一致しなくなります。

フォーム擬似クラス

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:autofill
110
110
86
15
110
15
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (79)
注釈 4件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • `:autofill` 疑似クラスは、自動入力されたユーザー名とパスワードのフィールドに一致しますが、他の自動入力されたフィールドには一致しません。 バグ 1923525 を参照してください。
  • `:-webkit-autofill` 疑似クラスは、自動入力されたユーザー名とパスワードのフィールドに一致しますが、他の自動入力されたフィールドには一致しません。 バグ 1923525 を参照してください。
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (86)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (3)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)

基本構文

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

ライブデモ

Normalstate

CSS Normalstate demo.

プレビュー全画面表示

:autofill Apply time

CSS:autofill apply time demo.

プレビュー全画面表示

Custom styles

CSS customstyle demo.

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク