chrome浏览器自动填充背景色-webkit-autofill

输入框在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;}

chrome浏览器自动填充背景色-webkit-autofill相关推荐

chrome浏览器自动填充时背景色改变（-webkit-autofill）
出现的问题在做一个表单时使用chrome浏览器输入表单内容,在第二次测试的时候出现了自动填充的选项,选择后发现输入框的样式不再是手动设置的样式原手动填充效果如下: 选择自动填充后的样式: 此时观察 ...
禁止chrome浏览器自动填充表单的解决方案
禁止chrome浏览器自动填充表单的解决方案参考文章: (1)禁止chrome浏览器自动填充表单的解决方案 (2)https://www.cnblogs.com/ld-swust/p/5801606 ...
Chrome浏览器自动填充的表单如何去掉淡黄色背景？？？
1.原因:表单自动填充元素在chrome下会有一个默认样式 (如下),并且优先级最高,无法覆盖(!important也无法覆盖). input:-webkit-autofill { backgroun ...
取消chrome浏览器自动填充密码功能-autocomplete
在前端页面进行登录时,需要填写密码,那么为了保证密码不被看到,我们首选的input表单的type类型必然时password. 例如 <input type="password" ...
关于chrome、360浏览器自动填充的黄色背景处理方案
关于chrome.360浏览器自动填充的黄色背景样式解决方案最近在做pc端项目,碰上了这个问题,到处找解决方案,总结一下常见的做个笔记,欢迎大佬们补充文章目录关于chrome.360浏览器自动填 ...
一个输入框背景色改不了？去除浏览器自动填充的背景颜色
START 番茄又来写点啥啦,今天遇到一个有趣的事情,朋友找到我,说他改一个输入框的背景颜色,改了好久,叫我帮忙看看.我满脸问号?很难吗?当我了解到实际的需求,发现确实有点有趣,写个文档记录一下. 了 ...
修改浏览器自动填充的input背景色
修改前: 使用浏览器自动填充账号密码时,input样式会变为自动填充色. 修改后: 代码(亲测有效!!): .ant-input {&:-webkit-autofill {background ...
清除input自动填充背景色
HTML输入框input标签自动填充背景色可以通过CSS的autofill伪类修改取消,自动填充字体颜色则可以通过CSS的text-fill-color属性设置以谷歌浏览器chrome为例: inp ...
input文本框自动填充背景色黄色解决办法
文章目录 input文本框自动填充背景色黄色解决方式解决前后,截图对比: 解决方式兼容性说明 input文本框自动填充背景色黄色解决方式如何取消黄背景色?浏览器兼容处理? 解决前后,截图对比: ...

chrome浏览器自动填充背景色-webkit-autofill

chrome浏览器自动填充背景色-webkit-autofill相关推荐

最新文章

热门文章