今天完成的事：

     了解jQuery ajax 重写登录逻辑。提交任务通过。

明天的计划：

      把任务四和任务五的深度思考过一边。

遇到的问题：

     Chrome浏览器表单自动填充默认样式

收获：

例子是网上找的，和我的一样

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: 毕竟是一个很好的功能, 关了多不方便.

2. 通过纯色的阴影覆盖底(huang)色

 input:-webkit-autofill {

 -webkit-box-shadow: 0 0 0px 1000px white inset;

 -webkit-text-fill-color: #333;

}

BoxShadow参考资料 

注: 这种只适用于纯色背景的输入框.

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