:autofill CSS 中的伪类用于设置 <input> 元素的外观样式，该元素的值由浏览器自动填充，指示用户之前的数据已保存并加载到表单中。当用户编辑字段时，伪类 :autofill 停止匹配。
许多浏览器在其内部样式表中使用 important!反对 -webkit-autofill 样式声明，该声明不能被网页覆盖。
为了获得最佳浏览器支持，您应该同时使用 -webkit- autofill 和 :autofill。
语法
input:autofill {
/* ... */
} :autofill 伪类在 Chrome、Edge、Opera 浏览器中使用供应商前缀:-webkit- 实现。
CSS :autofill 示例
以下示例演示在输入元素上使用 :autofill 伪类。当浏览器自动完成文本字段时，输入元素的边框和背景颜色会发生变化。
<html>
<head>
<style>
label {
display: block;
margin-top: 1em;
}
input {
border: 3px solid grey;
padding: 5px;
}
input:-webkit-autofill,
input:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:focus {
border-radius: 3px;
border: 3px solid red;
-webkit-text-fill-color: blue;
box-shadow: 0 0 0px 1000px yellow inset;
}
input:autofill,
input:autofill:focus,
select:autofill,
select:autofll:focus {
border-radius: 3px;
border: 3px solid red;
-webkit-text-fill-color: blue;
box-shadow: 0 0 0px 1000px yellow inset;
}
</style>
</head>
<body>
<h3>:autofill example</h3>
<form method="post" action="">
<label for="name">First Name</label>
<input type="text" id="name" />
<label for="name">Last Name</label>
<input type="text" id="name" />
<label for="email">Email</label>
<input type="email" name="email" id="email" autocomplete="email" />
</form>
</body>
</html>