CSS - 伪类 :autofill

CSS 中的:autofill伪类用于设置<input>元素的外观样式，该元素的值由浏览器自动填充，表明用户之前的数据已保存并加载到表单中。当用户编辑字段时，伪类:autofill将停止匹配。

许多浏览器的内部样式表对-webkit-autofill样式声明使用!important，网页无法覆盖它。

为了获得最佳浏览器支持，应同时使用-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>

打印页面