: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-color、background-image 或 color 等属性。

语法

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 Standard
# selector-autofill

浏览器兼容性

BCD tables only load in the browser

参见