Chrome会在客户登陆过某网站之后, 会自动记住密码
当你下次再次进入该网站的时候, 可以自由的选择登陆的账号, Chrome会为你自动填充密码. 而你无需再输入密码
这本身是一个很好的功能, 但是对于开发者而言, 却有一个很让人难受的问题.
当你选择账号密码之后, 你的输入框会变成浏览器自带的颜色。
之所以出现这样的样式, 是因为Chrome会自动为input增加如下样式.
input:-internal-autofill-selected {
background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: rgb(0, 0, 0) !important;
}
虽然不影响,色调也还可以,但是呢,设计稿的input框的颜色是淡灰色,咱要严谨,以设计稿为主是不。最简单的方法,就是在input框上添加autocomplete="off"的属性。
1、关闭浏览器自带填充表单功能
<!-- 对整个表单的设置 -->
<form autocomplete="off">
<!-- 单独对某个组件设置 -->
<input type="text" autocomplete="off">
但是呢,现在各种UI库有的无法直接设置input的属性,我们用ant design,找遍了api没找到,所以只能另辟蹊径了。
2、通过纯色的阴影覆盖底色
.ant-input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px rgb(246, 246, 246) inset;
-webkit-text-fill-color: #333;
}
3、通过设置input样式动画
<!-- 99999s 基本上就是一个无限长的时间
通过延长增加自动填充背景色的方式, 是用户感受不到样式的变化
-->
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-transition-delay: 99999s;
-webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
}
参考:https://blog.csdn.net/zhangdongxu999/article/details/73741390