解决chrome自动填充白色背景(input:-internal-autofill-previewed)问题
项目中管理系统使用chrome的首页登录界面会自动填充灰色背景。其填充样式为:
填充界面如下:
在网上查询了许多资料。这里我总结下比较好用的两个方法:
1.使用box-shadow将填充的背景覆盖(适用于纯色背景),其代码为:
input:-webkit-autofill { box-shadow: 0 0 0px 1000px #002E65 inset !important; text-fill-color: white;-webkit-text-fill-color: white; }
结果如下图:
虽然确实把灰色背景给解决了,但由于我的项目是渐变色背景,故依旧存在问题。
2.使用background-clip属性,使它的值为 content-box(将背景裁剪到内容框),再设input的高度为0,最后使用padding将input框撑开即可,其样式如下:
height: 0;border: 0;background-clip: content-box;padding: 12px 5px 12px 15px;
结果如下图:
很nice,完美的解决了该问题。然而,在使用鼠标点选账号密码时依旧会出现灰色背景(不清楚是我项目环境还是其他什么问题),最后的解决办法也是误打误撞,将background-clip的权重提到最高content-box!important就行,不会再出现灰色背景~~。
解决chrome自动填充白色背景(input:-internal-autofill-previewed)问题相关推荐
- 解决Chrome 自动填充的表单是淡黄色的背景问题
2019独角兽企业重金招聘Python工程师标准>>> 情景一:input文本框是纯色背景的 input:-webkit-autofill {-webkit-box-shadow: ...
- 解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 一般的浏览器input和button的高度不一致问题...
解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...
- Chrome 自动填充的表单是淡黄色的背景怎么办!
chrome浏览器自动填充表单的黄色背景高亮(#FAFFBD)一直困扰着我,我之前没想着理它,可是最近一个登陆框,需要用到图标,于是我草率的直接设置在input元素里面,结果问题就来了,很难看很难看, ...
- 去掉Chrome自动填充表单浅黄色背景色
前言 今天玩推时看到Chrome自动填充表单一个安全性问题,瞬间勾起我对其另一个显示问题的不满,忍不住小吐槽一下. 问题 Chrome自动填充表单(记住用户名或密码)时,input会出现黄色的背景.如 ...
- html表单背景如何填充,Chrome 自动填充的表单是淡黄色的背景,有方法自定义吗...
这个本人原创文章,原文链接 去掉chrome记住密码后自动填充表单的黄色背景 写本文起因 chrome浏览器自动填充表单的黄色背景高亮(#FAFFBD)一直困扰着我,我之前没想着理它,可是最近一个登陆 ...
- 修改自动填充的input背景色
input框颜色怎么改都不起作用,发现是用户代理样式表的东西自动填充了 input:-internal-autofill-selected {appearance: menulist-button;b ...
- 解决输入框自动填充账号密码的问题
解决输入框自动填充账号密码的问题 参考文章: (1)解决输入框自动填充账号密码的问题 (2)https://www.cnblogs.com/yzyh/p/11584500.html (3)https: ...
- layui 解决浏览器自动填充form表单账号和密码输入框的问题
layui 解决浏览器自动填充form表单账号和密码输入框的问题 参考文章: (1)layui 解决浏览器自动填充form表单账号和密码输入框的问题 (2)https://www.cnblogs.co ...
- Vue+element 解决浏览器自动填充记住的账号密码问题
Vue+element 解决浏览器自动填充记住的账号密码问题 参考文章: (1)Vue+element 解决浏览器自动填充记住的账号密码问题 (2)https://www.cnblogs.com/ju ...
最新文章
- python快速小教程
- 网络IO超时的几种实现
- C/C++头文件大全
- 流言终结者:大数据工程师真的做不过35岁吗?
- 命令行打印文件树列表: tree 1
- Flask爱家租房--celery(总结)
- java treemap_Java TreeMap HigherKey()方法与示例
- java连接sqlserver非默认实例连接字符串设置
- 什么是DBA[WHAT'S MEANING OF DBA]
- response.contenttype
- Xcode添加include目录
- 配置JAVA的环境变量
- 诡异事件之自定义UINavigationController
- C Primer Plus(6) 中文版 第11章 字符串和字符串函数 11.1 表示字符串和字符串I/O
- Caused by: java.lang.ClassNotFoundException: org.jbpm.pvm.internal.processengine.SpringHelper
- Stimulsoft报表使用心得
- (翻译)优秀价格表的7种设计策略
- 如何用PhotoShop去掉图片上的某些文字
- Android————一个简单的新闻面板
- 自定义广告联盟接入解决方案,适用所有广告商接入。