覆盖自动填充样式

• • 版本：umi-3.5.1，antd-4.1.3
• • 如图所示，自动填充的样式白色的会直接覆盖写的input样式，就显的很丑：
• 
• • 要想覆盖自动填充的样式，有个叫autofill的，我从网上搜刮来的2个代码都可以覆盖
• • 第一个方法使用了 -webkit-autofill 伪类并设置了透明色，让 input 输入框被自动填充后文字颜色和背景色保持一致（这里他说透明颜色不要写transparent，但是我写了也没事），设置了 box-shadow 为一个没有偏移量的等于框的大小的透明的内部阴影，将默认的浏览器下拉提示框隐藏，为了防止 input 自动填充时样式闪烁，还设置了一个较长时间的过渡延迟时间：

• // 自动填充样式修改方法一：
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
      //设置为透明色时不要写transparent,否则不生效，可自行调整其他颜色    -webkit-text-fill-color: #fff !important; //字体颜色
      -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
      -webkit-transition-delay: 99999s;
      -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
  }
  
  .ant-input-affix-wrapper input.ant-input:focus {
      background: transparent !important;
      box-shadow: none !important;
  }

• • 第二个方法使用了 :-webkit-autofill 伪类，并通过设置 transition 属性使 input 输入框填充时的过渡效果更加平滑。还设置了 -webkit-text-fill-color: #ffffff !important，使填充后的文字颜色和 color 属性设置的颜色相同：

• Input {
    color: #ffffff;
    background-color: #162751;
    // 自动填充样式修改方法二：
    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus,
    &:-webkit-autofill:active {
      transition: background-color 5000s!important;
      -webkit-text-fill-color: #ffffff !important;
    }
  }

• • 加上以后就很美观了：
• 

取消自动填充

• • 版本：umi-3.5.1，antd-4.1.3
• • 这个登录页面有个问题，就是一进页面，账号密码都输入好了，这样很不好
• • 一开始，我写了autocomplete="off"，立马控制台就报警告了：
• 
• • 让我用autoComplete，我写了autoComplete='off'，突然发现一进页面还是把账号密码都输入完了
• • 因为我启动项目的地址是http://localhost:8000/，浏览器已经帮我保存了这个地址的账号密码，点击Chrome设置-自动填充和密码-密码管理器
• 
• 
• • 可以看到已经保存了
• 
• • 所以要么就开个无痕模式的Chrome，Ctrl+Shift+N，要么改一下端口号8000改成8001啥的，或者直接把这个密码删了，就可以了：
• 
• • autoComplete="off"也可以写成autoComplete="new-password"
• - "off"：浏览器不允许为此字段自动输入或选择一个值。文档或应用程序可能提供其自己的自动完成功能，或者出于安全方面的考虑，要求不要自动输入该字段的值，在大多数现代浏览器中，不会阻止密码管理器询问用户是否要保存用户名和密码信息，或者自动在网站的登录表单中填写这些值。
• - 'new-password'：新密码。创建新账户或更改密码时，应将其用于“输入新密码”或“确认新密码”字段，而不是通常出现的“输入当前密码”字段。浏览器可以使用它来避免意外填写现有密码。
• • 如果要取消这个东西的话：
• 
• • 这是浏览器的机制，到刚才Chrome设置-自动填充和密码-密码管理器把这个取消了，原本存的密码删了，下次进入的时候就不会提示这个框框了
•