remove chrome or firefox autofill background color

·  阅读 224

原文链接 github.com

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

设计大哥截图过来说下面的小眼睛位置偏了,需要调整(这是Chrome) 企业微信截图_44a3ea5d-6155-49b9-ba88-f6c1dd65d70c

背景

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

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

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

一般效果就是如下图这样: form-autocomplete

不同浏览器的样式

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

分类:
前端
标签: