去掉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