CSS - 伪类 :autofill

CSS 中的 ：autofill 伪类用于设置 <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>

打印本页