: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> 元素的值时匹配该 input 元素。如果用户编辑了该字段,则该类将不再匹配。

尝试一下

备注: 许多浏览器的用户代理样式表在其 :-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-colorbackground-imagecolor 等属性。

语法

css
: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
# selector-autofill
Selectors Level 4
# selectordef-autofill

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:autofill

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见