Chrome带背景图输入框自动填充黄色背景消除及背景图丢失解决

我碰到过一模一样的问题！你用-webkit-box-shadow覆盖背景色的做法确实能去掉Chrome自动填充的黄色，但这个inset阴影会把元素原来的背景图完全盖住——因为阴影是绘制在背景层之上的。下面给你几个实用的解决办法：

方案一：用伪元素承载背景图 #

把背景图放到输入框的伪元素里，让它在阴影层的上方显示，这样就不会被阴影盖住了。修改你的CSS：

.login-username {
  background: #b29957;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  color: #ffffff;
  font-size: 17px;
  font-weight: bold;
  padding-left: 32px;
  border: 1px solid #b29957;
  border-bottom: 1px solid #8d6e63;
  width: 270px;
  height: 40px;
  outline: none;
  position: relative; /* 为伪元素定位提供基准 */
}

/* 新增伪元素来放背景图 */
.login-username::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 6px;
  width: 20px; /* 根据你的图标实际尺寸调整 */
  height: 28px;
  background-image: url(../Images/user.png);
  background-repeat: no-repeat;
  pointer-events: none; /* 避免干扰输入框的点击、输入等交互 */
  z-index: 1; /* 确保在阴影之上显示 */
}

input:-webkit-autofill, 
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill, 
textarea:-webkit-autofill:hover, 
textarea:-webkit-autofill:focus,
select:-webkit-autofill, 
select:-webkit-autofill:hover, 
select:-webkit-autofill:focus {
  -webkit-text-fill-color: white;
  -webkit-box-shadow: 0 0 0px 1000px #b29957 inset;
  transition: background-color 5000s ease-in-out 0s;
}

方案二：用background-clip限制阴影范围 #

通过background-clip属性让阴影只填充输入框的内容区域，留出背景图的位置。调整后的CSS：

.login-username {
  background: #b29957 url(../Images/user.png) no-repeat 3px 6px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  color: #ffffff;
  font-size: 17px;
  font-weight: bold;
  padding-left: 32px;
  border: 1px solid #b29957;
  border-bottom: 1px solid #8d6e63;
  width: 270px;
  height: 40px;
  outline: none;
  background-clip: content-box; /* 让背景只在内容区域显示 */
}

input:-webkit-autofill, 
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill, 
textarea:-webkit-autofill:hover, 
textarea:-webkit-autofill:focus,
select:-webkit-autofill, 
select:-webkit-autofill:hover, 
select:-webkit-autofill:focus {
  -webkit-text-fill-color: white;
  -webkit-box-shadow: 0 0 0px 1000px #b29957 inset;
  transition: background-color 5000s ease-in-out 0s;
  background-clip: content-box; /* 同步设置阴影的裁剪范围，和背景保持一致 */
}

方案三：直接禁用自动填充（如果业务允许） #

如果你的场景不需要浏览器的自动填充功能，最简单的办法就是给输入框加上autocomplete属性，从根源上避免自动填充触发：

修改你的Razor代码：

@Html.TextBoxFor(m => m.UserName, new { id = "username", @class = "login-username", @placeholder = AppMessages.UserName, autocomplete = "off" })
@Html.PasswordFor(m => m.Password, new { id = "password", @class = "login-password", @placeholder = AppMessages.Password, autocomplete = "new-password" })

autocomplete="new-password"是专门针对密码框的，能更可靠地阻止Chrome自动填充密码。

内容的提问来源于stack exchange，提问作者tesicg