谷歌浏览器自动填充input 背景颜色变黄

在现代浏览器中大部分都自带了自动填充表单的功能,虽然很方便但是也带来了一些需要解决的问题。

例如谷歌浏览器会改变自动填充的input背景颜色 看起来有点丑。我们需要解决这个问题。图例:

解决方案

  1. 覆盖填充颜色css
input:-webkit-autofill {
   -webkit-box-shadow:0 0 0 1000px #fff inset !important; /* 背景颜色 */
   -webkit-text-fill-color: #fff !important; /* 字体颜色 */
}

但是它无法解决图例中的问题 因为图例中的背景颜色是透明的,解决方案中的box-shadow不允许使用rgba等设置为透明背景颜色的方案。

  1. 设置transition延迟改变背景颜色
    -webkit-text-fill-color: #fff !important;
    transition: background-color 9999s ease-in-out 0s;

这是一个暂时可以满足我的图例需求的解决方案,他有一个缺点就是用户长时间逗留页面transition会慢慢将背景颜色渐变到黄色。

  1. 禁止浏览器自动填充autocomplete="off"
<form autocomplete="off" method=".." action="..">  
<input type="text" name="textboxname" autocomplete="off">

每个解决方案都有它的优缺点,取舍的话就需要看项目需求了。
这是我目前已知的解决方案 如果有其他的解决方案 欢迎留言呀。