3种chrome谷歌浏览器表单自动填充时默认的黄色背景样式修改-autofill

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覆盖。

 

解决方法:

• 如果你们很牛逼，可以直接关闭

<!-- 对整个表单的设置 -->

<form autocomplete="off">

<!-- 单独对某个组件设置 -->

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

 

• 通过纯色的阴影覆盖底色

input:-webkit-autofill {

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

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

}

CSS3 box-shadow 属性

 

• 通过设置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;

}

 

更多文章jacktesla的博客