输入框在chrome浏览器下显示白色背景,主要针对type为password的input,即使添加了非白色背景,仍然没用,看控制面板会有自动填充:input:-webkit-autofill的 background-color: rgb(250, 255, 189)!important;这个样式
尝试把自动填充关闭:autocomplete="off",仍然没有用。
解决如下:
1、设置box-shadow 用阴影覆盖,这种方法比较适合 纯色背景,不适合透明背景。
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px rgba(67,118,144,0.5) inset;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
-webkit-text-fill-color: #333;
}
2、延长自动填充背景色的时间,如让颜色填充在“一万年”以后实现,这样短时间就看不到啦:
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition-delay: 5000s;
transition: color 5000s ease-out, background-color 5000s ease-out;
-webkit-transition-delay: 5000s;
-webkit-transition: color 5000s ease-out, background-color 5000s ease-out;
}