CSS（一）chrome 浏览器表单自动填充默认样式 - autofil_半个 GIS 半个前端的博客 - CSDN 博客

> 本文由 [简悦 SimpRead](http://ksria.com/simpread/) 转码， 原文地址 [blog.csdn.net](https://blog.csdn.net/zhengjie0722/article/details/90319321)

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

![](https://img-blog.csdnimg.cn/20190518194112745.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poZW5namllMDcyMg==,size_16,color_FFFFFF,t_70)

虽然不影响，色调也还可以，但是呢，设计稿的 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;
      }
```

![](https://img-blog.csdnimg.cn/20190518194610585.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poZW5namllMDcyMg==,size_16,color_FFFFFF,t_70)

3、通过设置 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;
    }
```

参考：[https://blog.csdn.net/zhangdongxu999/article/details/73741390](https://blog.csdn.net/zhangdongxu999/article/details/73741390%C2%A0)