如何避免 Chrome 在自动填充输入上隐藏背景图像和颜色

Question

Chrome浏览器自动填充去除的效果background-color，并background-image从Username与Password输入字段。

自动完成前

自动完成后

但是Chrome 浏览器自动完成功能隐藏了我的输入图标，并且还更改了我的background-color. 所以我需要我的图标保持原样。

是否可以阻止Chrome 浏览器更改字段的背景颜色并隐藏图像？

.form-section .form-control {
	border-radius: 4px;
	background-color: #f7f8fa;
	border: none;
	padding-left: 62px;
	height: 51px;
	font-size: 16px;
	background-repeat: no-repeat;
	background-position: left 17px center;
}

.form-section .form-control:focus {
	-webkit-box-shadow: none;
	box-shadow: none;
}

.form-section .form-group {
	margin-bottom: 21px;
}

.form-section .form-control[type="email"] {
	background-image: url('https://i.stack.imgur.com/xhx3w.png');
}

.form-section .form-control[type="password"] {
	background-image: url('https://i.stack.imgur.com/910l0.png');
}

.form-btn {
  padding:10px;
    background-color: #65a3fe;
    border: none;
    color: #ffffff;    
    font-size: 18px;
    font-weight: 700;
}

<div class="form-section">
    <form>                                 
        <div class="form-group">
            <input title="Email" type="email" class="form-control" name="email" placeholder="Your email address" value="">
		</div>
        <div class="form-group">
            <input title="Password" type="password" class="form-control" name="password" placeholder="Your Password">
		</div>
        <button type="submit" class="btn btn-primary form-btn">Log in</button>
    </form>
</div>

Answer 1

在这里您可以使用任何颜色，例如white, #DDD, rgba(102, 163, 177, 0.45)。

对于背景： transparent在这里不起作用，所以请使用颜色。

/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

对于文字颜色：

/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: yellow !important;
}

您的解决方案：（对于上述情况）

使用单独div的图标和input

/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: yellow !important;
}