谷歌chrome表单自动填充后,input文本框的背景变黄色,这是谷歌的私有属性input:-webkit-autofill引起;
input:-webkit-autofill {
background-color: #FAFFBD;
background-image: none;
color: #000;
};//并且这个样式没法用 !important 优先级覆盖掉
简单解决:可以对input:-webkit-autofill使用内阴影来覆盖input输入框的黄色背景
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
//焦点时也加上,不加会出现黄色背景闪动一下
input[type=text]:focus, input[type=password]:focus, textarea:focus {
-webkit-box-shadow: 0 0 0 1000px white inset;
}
或者粗暴一点解决,就是关闭表单form的自动填充功能;
<form autocomplete=”off”><form>
//当然js也可以解决,但尽量能用css就用css