chorme 浏览器记住密码后input黄色背景处理方法(两种)

使用chrome浏览器选择记住密码的账号，输入框会自动加上黄色的背景，有些设计输入框是透明背景的，需要去除掉这个黄色的背景；

image.png

方法1：阴影覆盖

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

由于是设置颜色覆盖，所以只对非透明的纯色背景有效；

方法2：修改chrome浏览器渲染黄色背景的时间

:-webkit-autofill {
 -webkit-text-fill-color: #fff !important;
 transition: background-color 5000s ease-in-out 0s;
}

image.png

注意：不支持input框使用的背景图片（会被自己设置的背景颜色覆盖： white）

可以这样使用：

原理很简单，下面一个 div，上面放 div(显示图片) + input，把图片div放在input的上面。



图片div的css：

.user {background:url("/images/login/icon_user.png");background-repeat:no-repeat; background-position: 5px center;}
.icon-position {z-index:3;position:relative;height:40px;width:28px;}



输入框的css：

.input-position {margin-top:-40px;padding-left:34px;width:340px;}
.input-style {border:1px solid #dedede;border-radius:4px;font-size:14px;font-family:微软雅黑,黑体;vertical-align:middle;height:40px;line-height:40px;outline:0px;}



HTML片段：



<div>

   <div class="user icon-position"></div>

   <input type="text" class="input-position input-style" name="username" id="username" placeholder="登录账号">

<div>