input 记住密码后,去除黄色背景

随手百度了一下,发现普遍的解决方案是:

    box-shadow: 0 0 0px 1000px white inset

通过上面的代码可以看到,这种方法只能满足纯色背景的需求,遇到了图片背景就歇菜了。而且需要注意的是,box-shadow是很慢的!

这时候有些人要问为什么不直接覆盖原来的颜色,我们先试试吧,先检查属性,找到:-webkit-autofill这个属性,发现有一个偏黄色值,试试修改他,哦不行,加了!important也不行! 想看不能看啊,看来只能找小姐了,啊呸,找别的小办法咯。

既然不能直接修改,那来个曲线救国吧,先延迟他的切换时间,对,说干就干。

    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;
    }

OK,完美

但是,这个方案不是很优雅(网上还有一段JQ的代码呢,这个还算是很优雅性能很不错的了)。我们去看看大公司都是怎么做的,比如淘宝。

试了下,淘宝懒得鸟这个问题,那么找知乎试试,哦,他是用第一种方案,虽然不是很好的解决方案,但是确实解决了问题。划算大公司都没用,怎么办,放弃么? no 我是不会放弃的。

再想想,既然是透明的,那么不给他背景呢, 恩,对,把背景移到文字上了。

  -webkit-background-clip: text;

那么,这就完美解决啦。
---END--

你可能感兴趣的