このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
:autofill
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2023年2月.
: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 name="name" type="text" autocomplete="name" /> <label for="email">メールアドレス</label> <input name="email" type="email" autocomplete="email" /> <label for="country">国</label> <input 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" autocomplete="email" /></form>仕様書
| Specification |
|---|
| HTML # selector-autofill |
| Selectors Level 4 # selectordef-autofill |
ブラウザーの互換性
関連情報
- Chromium issue 46543: Auto-filled input text box yellow background highlight cannot be turned off
- WebKit bug 66032: Allow site authors to override autofilled fields' colors.
- Mozilla bug 740979: implement
:-moz-autofillpseudo-class on input elements with an autofilled value - User Interface Module Level 4: more selectors