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

来源：http://blog.csdn.net/zhangdongxu999/article/details/73741390

Chrome会在客户登录过某网站以后, 会自动记住密码
当你下次再次进入该网站的时候, 能够自由的选择登录的帐号, Chrome会为你自动填充密码. 而你无需再输入密码
这自己是一个很好的功能, 可是对于开发者而言, 却有一个很让人难受的问题.
当你选择帐号密码以后, 你的输入框会变成黄色… x黄色 (额. 只是由于我单纯的不喜欢这个颜色. 勿喷, 谢谢).

之因此出现这样的样式, 是由于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);
}

这个样式的优先级也比较高.
没法经过important覆盖(这就比较恶心了).
解决方法

1. 关闭浏览器自带填充表单功能

若是你的网站安全级别高一些, 能够直接关闭. 也不须要再调样式了.

<form autocomplete="off">

<input type="text" autocomplete="off">

PS: 毕竟是一个很好的功能, 关了多不方便.

1. 经过纯色的阴影覆盖底(huang)色

input:-webkit-autofill {
 -webkit-box-shadow: 0 0 0px 1000px white inset;
 -webkit-text-fill-color: #333;
}

BoxShadow参考资料
注: 这种只适用于纯色背景的输入框.

1. 经过设置input样式动画

推荐使用这种的. 由于基本上没有人会等那么久…

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;
    }