html表单填充样式,CSS（一）chrome浏览器表单自动填充默认样式-autofil

Chrome会在客户登录过某网站以后, 会自动记住密码

当你下次再次进入该网站的时候, 能够自由的选择登录的帐号, Chrome会为你自动填充密码. 而你无需再输入密码

这自己是一个很好的功能, 可是对于开发者而言, 却有一个很让人难受的问题.

当你选择帐号密码以后, 你的输入框会变成浏览器自带的颜色。css

之因此出现这样的样式, 是由于Chrome会自动为input增长以下样式.html

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"的属性。web

一、关闭浏览器自带填充表单功能

可是呢，如今各类UI库有的没法直接设置input的属性，咱们用ant design，找遍了api没找到，因此只能另辟蹊径了。api

二、经过纯色的阴影覆盖底色

.ant-input:-webkit-autofill {

-webkit-box-shadow: 0 0 0px 1000px rgb(246, 246, 246) inset;

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

}

三、经过设置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;

}