:autofill

基线 2023

新可用

自 2023 年 2 月起，此功能在最新的设备和浏览器版本中有效。此功能可能在较旧的设备或浏览器中无效。

:autofill CSS 伪类 匹配当 <input> 元素的值由浏览器自动填充时。如果用户编辑该字段，该类将停止匹配。

尝试一下

注意：许多浏览器的用户代理样式表在其 :-webkit-autofill 样式声明中使用 !important，使其无法被网页覆盖，除非使用 JavaScript hack。例如，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 伪类来更改浏览器自动完成的文本字段的边框。为了确保我们不会创建 无效的选择器列表，使用宽松的选择器列表和 :is() 匹配 :-webkit-autofill 和 :autofill。

css
input {
  border-radius: 3px;
}

input:is(:-webkit-autofill, :autofill) {
  border: 3px dotted orange;
}
html
<form method="post" action="">
  <label for="email">Email</label>
  <input type="email" name="email" id="email" autocomplete="email" />
</form>

规范

规范
HTML 标准
# selector-autofill

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅