: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 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 ã§ã¯å
é¨ã¹ã¿ã¤ã«ã·ã¼ãã§æ¬¡ã®ããã«ãªã£ã¦ãã¾ãã
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 ã¯ã :is() ãå«ãå¯å®¹ãªã»ã¬ã¯ã¿ã¼ãªã¹ãã使ç¨ãã¦ç
§åããã¾ãã
input {
border-radius: 3px;
}
input:is(:-webkit-autofill, :autofill) {
border: 3px dotted orange;
}
<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 > |
ãã©ã¦ã¶ã¼ã®äºææ§
é¢é£æ å ±
- 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