:autofill

Baseline 2023
Newly available

Since February 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

試してみましょう

label {
  display: block;
  margin-top: 1em;
}

input:is(:-webkit-autofill, :autofill) {
  border: 3px solid darkorange;
}

<form>
  <p>テキストボックスをクリックし、ブラウザーが提案するオプションから任意のものを選択してください。</p>

  <label for="name">名前</label>
  <input id="name" name="name" type="text" autocomplete="name" />

  <label for="email">メールアドレス</label>
  <input id="email" name="email" type="email" autocomplete="email" />

  <label for="country">国</label>
  <input id="country" name="country" type="text" autocomplete="country-name" />
</form>

メモ: 多くのブラウザーのユーザーエージェントスタイルシートでは、 :-webkit-autofill スタイル定義に !important を使用しており、 JavaScript によるハックで解決しない限り、ウェブページから上書きすることができません。例えば、 Chrome では内部スタイルシートで次のようになっています。

css
background-color: rgb(232 240 254) !important;
background-image: none !important;
color: -internal-light-dark(black, white) !important;

これは、 background-color, background-image, color に独自のルールを設定できないことを意味します。

構文

css
:autofill {
  /* ... */
}

例

次の例は、 :autofill 擬似クラスを使用して、ブラウザーによって自動補完されたテキストフィールドの境界線を変更することを示しています。 無効なセレクターリストを作成しないように、 :-webkit-autofill と :autofill は、 :is() を含む寛容なセレクターリストを使用して照合されます。

css
input {
  border-radius: 3px;
}

input:is(:-webkit-autofill, :autofill) {
  border: 3px dotted orange;
}
html
<form method="post" action="">
  <label for="email">メールアドレス</label>
  <input type="email" name="email" id="email" autocomplete="email" />
</form>

仕様書

Specification
HTML
# selector-autofill
Selectors Level 4
# selectordef-autofill

ブラウザーの互換性

関連情報