CSS 中的 ：autofill 伪类用于设置 <input> 元素的外观样式，其值由浏览器自动填充，向用户表明他们之前的数据已保存并加载到表单中。当用户编辑字段时，伪类 ：autofill 将停止匹配。
许多浏览器在其内部样式表中使用 important！ 来反对 -webkit-autofill 样式声明，这些声明不能被网页覆盖。
为了获得最佳的浏览器支持，您应该同时使用 -webkit-autofill 和 ：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>
