最近在整理项目的时候,遇到了一个chrome浏览器自动填充的样式问题,javascript
用户名跟密码的input都设置为透明颜色,可是会变成黄色,打开chrome调试工具,发现有个input:-webkit-autofill的 background-color: rgb(250, 255, 189)!important;这个样式,网上查询得三种方案,一种是把input自动输入关闭autocomplete="off",第二种是设置box-shadow阴影覆盖默认样式,css
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; -webkit-text-fill-color: #333; }
可是这种只适用于纯色背景java
第三种是经过延长增长自动填充背景色的方式, 是用户感觉不到样式的变化web
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; }
因为我这里输入框是背景为透明,选择第二种并无效果,因此选择第三种。chrome
总结:网上的方法不少,但要找到适合本身的解决方案。浏览器