自定义浏览器自动填充input框的样式

无论我们在用 Antd 的Input组件，还是原生的 input 标签，都会遇到这样一个问题：我们在设置好了普通的 input 样式的时候，在浏览器自动填充用户名和密码的时候，input 框出现了非预期的样式（Antd 是灰色背景，原生的是黄色背景）。

那么，怎么才能实现想要的效果呢？

直接上代码：

这是网上比较常见的代码，后文有我自己写的更符合实际情况的代码

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-transition-delay: 99999s;
	-webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
}

以上代码仅仅实现了只有单个 input 框的情况，但是很多时候，我们需要在 input 框里面放上设计师做的Icon，那么上面的代码就无法实现需求了，来看下面的代码：

.password input {
	outline: none;
	width: 263px;
	padding-left: 52px;
	height: 35px;
	border-radius: 5px;
	border: 1px solid rgba(175, 192, 209, 1);
	font-size: 12px;
	font-weight: 400;
	color: rgba(175, 192, 209, 1);
	line-height: 14px;
	background-image: url('./icon-normal.svg') no-repeat;
	background-position: 20px 7px;
}
.password input:focus {
	border: 1px solid rgba(0, 122, 255, 1);
	background-image: url('./icon-focus.svg');
	color: rgba(67, 92, 112, 1);
	box-shadow: 0px 2px 4px 0px rgba(32, 146, 255, 0.3);
}
.password :-webkit-autofill {
	animation: password-fix 1s infinite;
}
@keyframes password-fix {
	from {
		background-image: url('./icon-normal.svg');
	}
	to {
		background-image: url('./icon-focus.svg');
	}
}

代码还是很容易理解的，加上了:-webkit-autofill属性而已，在其内部，有 animation 做过渡效果，用了常用的@keyframes来命名过渡效果 css 的写法。

Donate