ウェブ機能:
:autofill
CSS :autofill を使用して、自動入力された（または自動入力されていない）フィールドをハイライト表示し、ユーザーがフォームを正常に完了できるようにします。
導入方法
ブラウザによって自動入力された（ユーザーが編集していない）フォーム フィールドをハイライト表示するには、:autofill クラスを使用して CSS にセレクタを追加します。これは、<input>、<select>、<textarea> の各要素に使用できます。
自動入力状態のスタイルを設定する際は、ユーザー補助のベスト プラクティスに準拠する必要があります。
- 複数の状態インジケーター: 自動入力の状態を示すために、枠線の色だけに頼らないでください。枠線の太さやカスタムの背景の網掛けなど、複数のインジケーターを使用して、状態を認識できるようにします。
- フォーカス インジケーターを保持する: キーボード ユーザー向けに、明確でコントラストの高い代替手段を提供せずに、フォーカス アウトライン（
outline: none）を削除しないでください。
次の例では、:autofill を使用して、カスタムの枠線と背景、および明示的なフォーカス スタイルを設定しています。
input:autofill,
input:-webkit-autofill {
/* Multiple indicators: use both a distinct border and background color via box-shadow to avoid color-only state */
border: 2px solid #2e7d32;
box-shadow: 0 0 0 100vmax #e8f5e9 inset;
}
/* MANDATORY: Always provide an explicit focus indicator when styling autofilled states */
input:autofill:focus-visible,
input:-webkit-autofill:focus-visible {
outline: 3px solid #000;
outline-offset: 2px;
}
この例に示すように、box-shadow プロパティを使用して背景をカスタマイズしています。これは、自動入力されたフィールドで background-color を直接オーバーライドできないためです。
正しい CSS 疑似クラス名を使用する
:auto-fill は使用しないでください。これは誤りです。
必須: 正しい疑似クラス名である :autofill を使用してください。
代替戦略
:autofill 疑似クラスはプログレッシブ エンハンスメントです。この属性をサポートしていないブラウザでも、フォームは通常どおり機能しますが、入力欄にカスタムの自動入力ハイライトが表示されません。ユーザーはフォームを正常に完了できます。追加の JavaScript フォールバックは使用しないでください。