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

Question

Chrome 浏览器自动填充从Username 和Password 输入字段中删除了background-color 和background-image 的效果。

自动完成之前

自动完成后

但 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

请检查这是否适合您。我对您的代码进行了一些更改。

你可以签到这个jsfiddle

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


.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-btn {
  padding:10px;
    background-color: #65a3fe;
    border: none;
    color: #ffffff;    
    font-size: 18px;
    font-weight: 700;
}

.control {
    position: relative;
}

.email .pass {
    padding-left: 35px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 16px;
}

.email ~ .input-icon {
    background-image: url('https://i.stack.imgur.com/xhx3w.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    width: 22px;
    height: 14px;
    position: absolute;
    left: 8px;
    bottom: 0;
    top: 0;
    margin: auto;
    padding-top: 5px;
    padding-bottom: 5px;

}
.pass ~ .input-icon {
  background-image: url('https://i.stack.imgur.com/910l0.png');  
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    width: 22px;
    height: 14px;
    position: absolute;
    left: 8px;
    bottom: 0;
    top: 0;
    margin: auto;
    padding-top: 5px;
    padding-bottom: 5px;
}

Answer 2

您不能覆盖自动完成代码，因为它由用户代理样式表控制，请查看cascading-order以了解更多信息。

这里是代码（我从谷歌浏览器复制）让你的图标在自动完成时消失，只是如果你想知道 em>：

input:-internal-autofill-selected {
      background-color: rgb(232, 240, 254) !important;
      background-image: none !important;
      color: -internal-light-dark-color(black, white) !important;
    }

那么现在怎么办？如果您打算解决图标消失问题，这里有一个 hack，您可以为您解决：

.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;
  position: relative;
}

.form-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.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="">

    <img class="form-icon" src="https://i.stack.imgur.com/xhx3w.png" alt="">
  </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 3

让我们试试这段代码，希望对你有帮助

.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');
}

@-webkit-keyframes autofill_email {
  to {
    background-image: url('https://i.stack.imgur.com/xhx3w.png');
  }
}

.form-section .form-control[type="email"]:-webkit-autofill {
  -webkit-animation-name: autofill_email;
  -webkit-animation-fill-mode: both;
}

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

@-webkit-keyframes autofill_pass {
  to {
    background-image: url('https://i.stack.imgur.com/910l0.png');
  }
}

.form-section .form-control[type="password"]:-webkit-autofill {
  -webkit-animation-name: autofill_pass;
  -webkit-animation-fill-mode: both;
}

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

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="py-4">
  <div class="container">
    <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>
  </div>
</section>

如果要移除背景颜色，则在关键帧样式中添加默认背景颜色

Answer 4

/* 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;
}


/*Additionally, you can use this to change the text color:*/

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

感谢@Fareed Alnamrouti 来自Removing input background colour for Chrome autocomplete?

Answer 5

在这里您可以使用任何颜色，例如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;
}

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

对图标和input使用单独的div

.form-section .form-control {
	
	font-size: 16px;
  width: 100%;
  margin-left: 9px;
}

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

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

.icon-email {
	background-image: url('https://i.stack.imgur.com/xhx3w.png');
  background-repeat: no-repeat;
    background-position: center center;
    width: 30px;
    height: auto;
}

.icon-pass {
	background-image: url('https://i.stack.imgur.com/910l0.png');
  background-repeat: no-repeat;
    background-position: center center;
    width: 30px;
    height: auto;
}

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

.input-txt{
    padding-left: 5px;
    float:left;
    border-left:none;
    outline:none ;
    border: none;
    background-color: #f7f8fa;
}

.custom-input {
    display: flex; 
    border-radius: 4px;
	background-color: #f7f8fa !important;
	border: none;
	height: 51px;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px #f7f8fa inset !important;
}

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