去掉Chrome自动填充表单浅黄色背景色

前言

今天玩推时看到Chrome自动填充表单一个安全性问题,瞬间勾起我对其另一个显示问题的不满,忍不住小吐槽一下.

问题

Chrome自动填充表单(记住用户名或密码)时,input会出现黄色的背景.如下图所示:

原因

这是一个历史悠久的 question ? bug : design.一直从10年持续到现在.如果你看一下Google的bug列表 a known bug in Chrome, 内心一定 哈哈哈 -> 呵呵呵 -> WTF…

错误姿势

1. Chrome默认只自动填充第一个<input type="password">和其前面的<input>

<input style="display: none">
<input type="password" style="display: none">

注: 此方法在新版本Chrome中已经不适用

2. 设置autocomplete="off"

• 从产品角度: 将自动表单填充禁掉是一个很不友好的设计.尽管自动填充从技术角度很不安全(用户一般也不懂),但是用户有权决定其使用与否.
• 从技术角度: 该方法在某些版本Chrome中不起作用.

3. !important

尽管这种办法很丑陋,但在某些时期确实能 “解决” 问题.但那些时期已过…

“较”正常办法

可以将inset的颜色设置为你web的背景色,但这种方法是有局限性的.具体请看下面

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

局限性

如果你的input背景色是透明的捏?举个栗子:

1. 初始状态

input背景色是透明的
效果:

2. 默认状态

效果:

3. 纯色

代码:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px rgba(143,143,143,1) inset;
}

效果:

4.透明

代码:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px rgba(143,143,143,0.5) inset;
}

效果:

So.臣妾实在做不到哇。求指正!求solution!

参考文章

• Remove forced yellow input background in Chrome
• Chrome Browser Ignoring AutoComplete=Off