去除浏览器给input输入框自动填充的黄色背景

在网上看到这种方式，没有亲试：

1.禁止谷歌浏览器默认填充和保存密码

　　浏览器保存密码是根据input="password"来判断的，所有我们只要保证浏览器在dom结构中识别不到密码框即可。
　　so：
　　-->密码输入位置默认为input="text"。
　　-->在输入框上添加 onfocus="this.type='password'" 输入框获得焦点时改变输入框格式为密码框　　
　　-->输入密码
　　-->在提交前清空输入框密码，并修改密码框为文本框。（我的提交为发生Ajax提交，可根据自己实际情况进行调整，或者情况密码之后，将值保存在一个隐藏域中，再提交单）
　　-->commit。

　　1）. 使用此方法即可在进入界面时浏览器不填充密码，也不会在提交之后保存密码。
　　2）. IE8+、Chrome、FF、360测试通过。（ie8会出问题的，input的type属性不能修改）
　　3）. 其实写这段代码的时候只是为了禁止Chrome保存密码，对于其他浏览器只是验证是否正常显示。
　　4）. 此方法不针对通过js向密码框输入密码的情况，因为js输入不触发获得焦点事件。

2.可能可行的其他方法：

　　不管是否已经记住密码，只要是 password的input中不使用id（或id为空）即可（准确说应该是 id 和 name 都为空或者是没有就可以）。测试可行，谷歌版本 57.0.2987.133

　　链接：https://www.zhihu.com/question/23529765/answer/90632851

3.设置隐藏域

　　<input type="password" name="txtPassword" style="display:none">

　　<input type="password" name="txtPassword" placeholder="请输入密码" autocomplete="off" />

　　谷歌浏览器比较吊，只加上一个隐藏密码框还是不行的，把两个密码框名字改成一样的就好了，这家伙就找不到了，(*^__^*) 嘻嘻……

　　再给大家分享一个解决方案，有需要的可以试一试

　　<input type="password" style="display:none;width:0;height:0;">

　　<input data-placeholder="请输入密码" name="password" data-required="true" type="password" autocomplete="new-password" data-max-length="50" tabindex="2" 　　　　　spellcheck="false" id="auto-id-1505904797992" placeholder="请输入密码">

　　先输入一个隐藏文本域，再输入第二个展示的文本框，重点是我加黑的字体，编译器可能会无法识别，但是浏览器可以解析。

　　链接：https://www.zhihu.com/question/23529765/answer/140579951

4.不禁止，只做修改背景色

　　chrome表单自动填充后，input文本框的背景会变成偏黄色的，这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式：

在有些情况下，这个黄色的背景会影响到我们界面的效果，尤其是在我们给input文本框使用图片背景的时候，原来的圆角和边框都被覆盖了

1. input:-webkit-autofill {
2. background-color: #FAFFBD;
3. background-image: none;
4. color: #000;
5. }

情景一：input文本框是纯色背景的

　　可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景；如：

1. input:-webkit-autofill {
2. -webkit-box-shadow: 0 0 0px 1000px white inset;
3. border: 1px solid #CCC!important;
4. }

如果你有使用圆角等属性，或者发现输入框的长度高度不太对，可以对其进行调整，除了chrome默认定义的background-color，background-image，color不能用!important提升其优先级以外，其他的属性均可使用!important提升其优先级，如：

1. input:-webkit-autofill {
2. -webkit-box-shadow: 0 0 0px 1000px white inset;
3. border: 1px solid #CCC!important;
4. height: 27px!important;
5. line-height: 27px!important;
6. border-radius: 0 4px 4px 0;
7. }

情景二：input文本框是使用图片背景的

这个比较麻烦，目前还没找到完美的解决方法，有两种选择：

1、如果你的图片背景不太复杂，只有一些简单的内阴影，那个人觉得完全可以使用上面介绍的方法用足够大的纯色内阴影去覆盖掉黄色背景，此时只不过是没有了原来的内阴影效果罢了。

2、如果你实在想留住原来的内阴影效果，那就只能牺牲chrome自动填充表单的功能，使用js去实现，例如：

 

1. $(function() {
2. if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
3. $(window).load(function(){
4. $('ul input:not(input[type=submit])').each(function(){
5. var outHtml = this.outerHTML;
6. $(this).append(outHtml);
7. });
8. });
9. }
10. });

遍历的对象可能要根据你的需求去调整。如果你不想使用js，好吧，在form标签上直接关闭了表单的自动填充功能：autocomplete=”off”。