: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.
試してみましょう
メモ: 多くのブラウザーのユーザーエージェントスタイルシートでは、 :-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
に独自のルールを設定できないことを意味します。
構文
:autofill
例
次の例は、 :autofill
擬似クラスを使用して、ブラウザーによって自動補完されたテキストフィールドの境界線を変更することを示しています。ブラウザーの互換性を保つために、 :-webkit-autofill
と :autofill
の両方を使用してください。
css
input {
border: 3px solid grey;
border-radius: 3px;
}
input:-webkit-autofill {
border: 3px solid blue;
}
input:autofill {
border: 3px solid blue;
}
html
<form method="post" action="">
<label for="email">Email</label>
<input type="email" name="email" id="email" autocomplete="email" />
</form>
仕様書
Specification |
---|
HTML Standard # selector-autofill |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 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-autofill
pseudo-class on input elements with an autofilled value - new css4-ui features - more selectors