前端膜法:用CSS去除Chrome表单自动填充时的淡黄色背景

注意:本文最后更新于 4年 前。

用过Chrome的人都知道,如果你在提交表单(如登录)时,选择了记住用户名和密码,那么下次登录时,保存的用户名和密码会自动填充,并且相应<input>标签的背景也会被强制设为淡黄色。

对于默认样式的输入框而言,加上淡黄色的背景并不会显得很违和。但如果你用了CSS让它变得漂亮些,那么这个强制添加的淡黄色背景很可能会毁掉你那精心调校的样式。

如果你遇到了这种情况,那么你一定会想着如何去把这个丑陋的淡黄色背景去掉,但不幸的是,这个由浏览器强加的样式,优先级是最高的,你根本无法覆盖掉它。

所以我们只能通过一些CSS hack的方式曲线救国,来“去除”这个讨厌的东西。

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #000000 inset;
}

这段CSS代码把所有被自动填充表单所涂上淡黄色的<input>标签,设置了一个巨大的白色内向box-shadow,已达到覆盖掉淡黄色背景的目的,适用于<input>原本是纯色背景的情况。

而对于最开始图中的情况,<input>标签原本是透明背景,这样才能把后面高斯模糊的背景图透出来,所以上面“覆盖”的方法并不可行,我们需要让背景都“消失”,于是便有了下面这种更加曲线救国的方式。

:-webkit-autofill {
    -webkit-text-fill-color: #fff !important;
    transition: background-color 5000000s ease-in-out 0s;
}

首先第一行先重新设置了原本的字体颜色,从CSS上来讲-webkit-text-fill-color刚好可以覆盖掉color

而重点在第二行,我们通过transition给那个淡黄色的背景加了个长达5000000秒的淡出效果,于是乎,这个淡黄色的背景就这样被巧妙的“隐藏”了起来,除非浏览者愿意盯着它看好几个小时,那淡黄色的背景才会略微显现出来一点点。

CSS的属性众多而有很多又互相干涉,相信对很多初学者留下了越改越乱,不停拆东墙补西墙的印象,但正是因为这样,才会出现各种有趣的CSS hack。

Web开发和打FPS一样,是一个下限很低而上限很高的东西,而Web也是在快速的发展着,只有不断接触新的知识,才能不落后于时代。

作者:WuSiYu

学生,Web开发者,智能硬件&IOT爱好者

2条评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注