前言

今天玩推时看到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

去掉Chrome自动填充表单浅黄色背景色相关推荐

去掉chrome记住密码后自动填充表单的黄色背景
chrome表单自动填充后,input文本框的背景会变成黄色的,通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对 ...
[css] 怎样修改chrome记住密码后自动填充表单的黄色背景？
[css] 怎样修改chrome记住密码后自动填充表单的黄色背景? input:-webkit-autofill { -webkit-box-shadow: 0 0 3px 100px #eee in ...
禁止chrome浏览器自动填充表单的解决方案
禁止chrome浏览器自动填充表单的解决方案参考文章: (1)禁止chrome浏览器自动填充表单的解决方案 (2)https://www.cnblogs.com/ld-swust/p/5801606 ...
解决谷歌浏览器chrome高版本关闭自动填充表单问题
chrome 关闭自动填充谷歌浏览器chrome.包括CentBrowser等谷歌内核的浏览器可能从67版本开始,好像就取消掉了关闭自动填充表单这个功能. 反正关闭自动记录表单变得很麻烦,几乎找不到 ...
html 360浏览器输入框自动填充,关于360浏览器自动填充表单问题以及解决方案
关于360浏览器自动填充表单问题以及解决方案浏览器发展现在的网络社会,拥有成千上万.形形色色的网站,相对应的就会存在许许多多的用户,而我们普通用户对于记住这些账号密码就显得好麻烦, 所以,现在的浏览 ...
selenium如何解决IE自动填充表单问题
有时候用selenium会碰到自动填充表单的问题,如输入用户名后,密码自动填充,此时再填充密码会导致登录失败,解决办法:每个输入框都调用clear()方法
C#控制浏览器自动填充表单的代码
将内容过程比较常用的一些内容段备份一下,如下的资料是关于C#控制浏览器自动填充表单的内容. HtmlDocument doc = webBrowser1.Document; HtmlElement e ...
360 html禁止自动填充,360浏览器的表单自动填充设置在哪?360浏览器自动填充表单的问题怎么解决？...
360浏览器的表单自动填充设置在哪?360浏览器自动填充表单的问题怎么解决? 很多用户都遇到了360浏览器自动填充表单的问题,那么怎么解决呢?今天带来360浏览器自动填充表单的问题解决方法分享. 开发 ...
如何修改 chrome 记住密码后自动填充表单的黄色背景？
chrome表单自动填充后,input文本框的背景会变成黄色的,通过审查元素可以看到这是由于chrome会默认给自动填充的in put表单加上input:-webkit-autofill私有属性,然后 ...

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

前言

问题

原因

错误姿势

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

2. 设置`autocomplete="off"`

3. `!important`

“较”正常办法

局限性

1. 初始状态

2. 默认状态

3. 纯色

4.透明

参考文章

去掉Chrome自动填充表单浅黄色背景色相关推荐

最新文章

热门文章

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

前言

问题

原因

错误姿势

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

2. 设置autocomplete="off"

3. !important

“较”正常办法

局限性

1. 初始状态

2. 默认状态

3. 纯色

4.透明

参考文章

去掉Chrome自动填充表单浅黄色背景色相关推荐

最新文章

热门文章

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

2. 设置`autocomplete="off"`

3. `!important`