remove chrome and firefox autofill background color

[minhuaF]

这是由一位有追求的设计大哥引起的血案。

设计大哥截图过来说下面的小眼睛位置偏了，需要调整（这是Chrome）

背景

Chrome 在用户登录过某个网站之后，会自动记住密码，当你下次再次进入该网站的时候，可以自由地选择登录的账号，Chrome能自动填充密码，而你无需再输入密码，对于用户来说是一个很好的功能。

但是对于开发者和设计师来说，却比较头疼。

但用户选择账号密码之后，输入框会变成黄色，这样开发设置的背景颜色就会被覆盖，比较影响美观。

一般效果就是如下图这样：

不同浏览器的样式

1. Chrome

在Chrome下回出现这样的样式，是因为Chrome会自动为input增肌如下样式

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  background-color: rgb(250, 255, 189);
  background-image: none;
  color: rgb(0, 0, 0);
}

解决方法 解决办法有很多种，这里只列出了推荐的用法

/*
  99999s 基本上就是一个无限长的时间
  通过延长增加自动填充背景色的方式, 使用户感受不到样式的变化
*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition-delay: 99999s;
  transition: color 99999s ease-out,      background-color 99999s ease-out;
}

2. fireFox

firefox 下会出现黄色的背景，查看一下firefox的源码，是由于下面这个代码引起的。

view-source:resource://gre-resources/forms.css

:-moz-autofill, :-moz-autofill-preview {
  filter: grayscale(21%) brightness(88%) contrast(161%) invert(10%) sepia(40%) saturate(206%);
}

解决方法

input {
  filter: none;
}

总结

想要input框在chrome和firfox下，不会有默认的背景颜色，可以添加以下样式代码

input {
  filter: none;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition-delay: 99999s;
  transition: color 99999s ease-out, background-color 99999s ease-out;
}

参考资料

chrome 浏览器表单自动填充默认样式 - autofill