在现代浏览器中大部分都自带了自动填充表单的功能,虽然很方便但是也带来了一些需要解决的问题。
例如谷歌浏览器会改变自动填充的input背景颜色 看起来有点丑。我们需要解决这个问题。图例:
解决方案
- 覆盖填充颜色css
input:-webkit-autofill {
-webkit-box-shadow:0 0 0 1000px #fff inset !important; /* 背景颜色 */
-webkit-text-fill-color: #fff !important; /* 字体颜色 */
}
但是它无法解决图例中的问题 因为图例中的背景颜色是透明的,解决方案中的box-shadow不允许使用rgba等设置为透明背景颜色的方案。
- 设置transition延迟改变背景颜色
-webkit-text-fill-color: #fff !important;
transition: background-color 9999s ease-in-out 0s;
这是一个暂时可以满足我的图例需求的解决方案,他有一个缺点就是用户长时间逗留页面transition会慢慢将背景颜色渐变到黄色。
- 禁止浏览器自动填充
autocomplete="off"
<form autocomplete="off" method=".." action="..">
<input type="text" name="textboxname" autocomplete="off">
每个解决方案都有它的优缺点,取舍的话就需要看项目需求了。
这是我目前已知的解决方案 如果有其他的解决方案 欢迎留言呀。