300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 解决chrome自动填充白色背景(input:-internal-autofill-previewed)问题

解决chrome自动填充白色背景(input:-internal-autofill-previewed)问题

时间:2024-03-18 03:30:44

相关推荐

解决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就行,不会再出现灰色背景~~。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。